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

Strefa poświęcona grafice WWW, ocena projektów graficznych, opinie, porady.
no avatar
fridayt7
 
Posty: 1
Reputacja: 0 pkt
Od: 15 kwi 2021, o 12:24

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

przez fridayt7 » 15 kwi 2021, o 12:29

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.

no avatar
amo
 
Posty: 27
Reputacja: 0 pkt
Od: 4 maja 2016, o 22:12

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

przez amo » 15 kwi 2021, o 21:31

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 */
  }
}




  • Podobne tematy
    Odpowiedzi
    Wyświetlone
    Ostatni post

Powrót do Grafika, Webdesign

Kto przegląda forum Wordpress

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 0 gości