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/