Zanikające, przenikające obrazy – animacje z CSS i JavaScript (jQuery)

Tym razem pokażę jak w prosty sposób wykonać ciekawą animacje na zdjęciach z użyciem CSS i JavaScript (jQuery) lub z samym CSS.

Zamiana obrazków po kliknięciu

Pierwszą animacją, którą cne pokazać to zamiana dwóch obrazów po kliknięciu w jeden z nich:

See the Pen pobagNd by Aura (@Julka85) on CodePen.

<div id="cf2" class="shadow">
  <img class="bottom" src="https://www.aurainweb.pl/wp-content/uploads/2017/07/kitten-2.jpg" />
  <img class="top" src="https://www.aurainweb.pl/wp-content/uploads/2017/07/kitten.jpg"/>
</div>
<span id="cf_onclick">Kliknij by zamienić</span>

Następnie trzeba je z pomocą CSS ustawić tak by jedna (wierzchnia) zakrywała drugą.

#cf2 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#cf2 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}

Teraz wystarczy dodać odpowiedni skrypt jQuery. W tym wypadku ukryje on wierzchni obrazek po kliknięciu do czasu, aż nie powtórzymy tej samej czynności.

<script>
  $(document).ready(function() {
    $("#cf_onclick, #cf2 img.top").click(function() {
      $("#cf2 img.top").toggleClass("transparent");
    });
  });
</script>

W efekcie uzyskujemy efekt przenikających się obrazów.

Zamiana miejscami obrazów

Kolejne dwa przykłady wykonam już tylko z pomocą CSS3. Tym razem animacja będzie opierała się o zdarzenie typu „hover” czyli zwykłe najechanie kursorem myszki na obiekt.

W pierwszym przypadku następuje zmniejszenie pierwszego wierzchniego obrazka podczas gdy spodni zostanie powiększony.
Do wykonania tej animacji przyda nam się funkcja „transform”.

Wygląd w HTML nie wiele różni się jak w poprzednim przykładzie:

<div id="cf4" class="hover">
    <img class="bottom shadow" src="https://www.aurainweb.pl/wp-content/uploads/2017/07/kitten-2.jpg">
    <img class="top shadow" src="https://www.aurainweb.pl/wp-content/uploads/2017/07/kitten.jpg" ">
</div>

Całościowy efekt nadaje dopiero CSS:

 #cf4 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
  }
  #cf4 img {
    position:absolute;
    left:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #cf4 img.top {
    -webkit-transform:scale(0,0);
    -moz-transform:scale(0,0);
    -o-transform:scale(0,0);
    transform:scale(0,0);
    opacity:0;

  }

  #cf4:hover img.top, #cf4.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -webkit-transform-origin: top right;
    -moz-transform:scale(1,1);
    -moz-transform-origin: top right;
    -o-transform:scale(1,1);
    -o-transform-origin: top right;
    transform:scale(1,1);
    transform-origin: top right;
  }

  #cf4:hover img.bottom, #cf4.hover_effect img.bottom {
    -webkit-transform:scale(0,0);
    -webkit-transform-origin: bottom left;
    -moz-transform:scale(0,0);
    -moz-transform-origin: bottom left;
    -o-transform:scale(0,0);
    -o-transform-origin: bottom left;
    transform:scale(0,0);
    transform-origin: bottom left;
  }

Kod ten nie tylko zmienia wielkość obrazków, ale dodaje do tego odpowiednią animację dzięki czemu zmiana obrazków jest płynna i dzięki temu ciekawa.

Kolejna animacja działa na podobnej zasadzie z tym, że zastosowano tu inny rodzaj animacji. Tym razem zmniejszenie obrazka nie następuje podczas przesunięcia się w bok a znika obracając się przy tym wokół własnej osi.

<div id="cf5" class="hover">
    <img class="bottom shadow" src="https://www.aurainweb.pl/wp-content/uploads/2017/07/kitten-2.jpg">
    <img class="top shadow" src="https://www.aurainweb.pl/wp-content/uploads/2017/07/kitten.jpg" ">
</div>

Efekt ten uzyskujemy dzięki:

 #cf5 {
    position:relative;
    height:281px;
    width:450px;
    margin:10px auto;
  }
  #cf5 img {
    position:absolute;
    left:0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
  }

  #cf5 img.top {
    -webkit-transform:scale(1,0);
    -moz-transform:scale(1,0);
    -o-transform:scale(1,0);
    transform:scale(1,0);
    filter: alpha(opacity=0);
    opacity:0;

  }

  #cf5:hover img.top, #cf5.hover_effect img.top {
    opacity:1;
    -webkit-transform:scale(1,1);
    -moz-transform:scale(1,1);
    -o-transform:scale(1,1);
    transform:scale(1,1);
  }

  #cf5:hover img.bottom, #cf5.hover_effect img.bottom {
    filter: alpha(opacity=0);
    -webkit-transform:rotate(360deg) scale(0,0);
    -moz-transform:rotate(360deg) scale(0,0);
    -o-transform:rotate(360deg) scale(0,0);
    transform:rotate(360deg) scale(0,0);
  }

Więcej ciekawych informacji i animacji znajdziecie pod adresem: http://css3.bradshawenterprises.com/cfimg/

A jak wam się podobała animacja w jQuery. Opinie zostawcie w komentarzu.

Źródło: http://css3.bradshawenterprises.com/cfimg/