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

Czas czytania: 3 minut

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

<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 w HTML

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.

Zmniejszanie i powiększanie

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

See the Pen
swap images on hover CSS, HTML by Aura (@Julka85)
on CodePen.0

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.

---

Obrót obrazka

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);
  }

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

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

Warto przeczytać:

• Obracanie obiektu w przestrzeni 2D
• Prosta animacja