Strona 1 z 1

Efekt zbliżającego się tła/obrazka

PostNapisane: 15 kwi 2021, o 12:29
przez fridayt7
Witam,

Szukam i szukam i postanowiłem napisać tutaj o tym na forum.

Mianowicie jak mogę wykonać efekt zbliżającego się tła w nagłówku strony?

Chodzi mi o taki efekt jak np tutaj:

https://preview.themeforest.net/item/dj ... 1617632431

Pozdrawiam.

Re: Efekt zbliżającego się tła/obrazka

PostNapisane: 15 kwi 2021, o 21:31
przez amo
HTML
Kod: Zaznacz cały
<div class="image-wrap">
  <img src="https://unsplash.it/900/700">
</div>


CSS
Kod: Zaznacz cały
.image-wrap {
  width: 100%;
  height: 50vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.image-wrap img {
  width: 100%;
  animation: move 40s ease;
  /* Add infinite to loop. */
 
  -ms-animation: move 40s ease;
  -webkit-animation: move 40s ease;
  -0-animation: move 40s ease;
  -moz-animation: move 40s ease;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    -ms-transform-origin: bottom left;
    -o-transform-origin: bottom left;
    transform-origin: bottom left;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    /* IE 9 */
   
    -webkit-transform: scale(1.0);
    /* Safari and Chrome */
   
    -o-transform: scale(1.0);
    /* Opera */
   
    -moz-transform: scale(1.0);
    /* Firefox */
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    /* IE 9 */
   
    -webkit-transform: scale(1.2);
    /* Safari and Chrome */
   
    -o-transform: scale(1.2);
    /* Opera */
   
    -moz-transform: scale(1.2);
    /* Firefox */
  }
}