Animasi Javascrip Sederhana Ringan Viewport Scroll

Yang dibagikan dihalaman ini adalah cara membuat animasi viewport scroll menggunakan javascript yang ringan dan sederhana, namun sudah cukup bagus dan lengkap untuk kreaifitas animasi yang ingin dibuat. Obyek yang diinginkan bisa diberikan efek animasi dan akan dijalankan setiap kali obyek tersebut terbuka di viewort saat layar discroll. Silakan coba scroll ke bawah utk melihat efek animasi yang ada di halaman ini.





..





..

.. 0

1

2

3

3a

4

5

6

7

..





..





..

.. 0 1 2 3 4 5 6 7

....

 

<div class="ani vis"></div>
<div class="ani vis" ef="FIR"></div>
<div class="ani" ef="SU"></div>
<div class="ani" ef="SD"></div>
<div class="ani" ef="FID"></div>
<div class="ani" ef="FIU"></div>
<div class="ani vis" ef="FI"></div>

|||

|||

|||

|||

|||

|||

|||

Untuk mencoba efek animasi tersebut, teman-teman bisa copas kode berikut ini. Silakan modifikasi sesuai kreatifitas.

 <style>
.ani{opacity:0.1;transform:translateX(6rem);transform-origin:0 0;transition:opacity 1.2s cubic-bezier(.5,1,.89,1) .4s,transform 1s cubic-bezier(.5,1,.89,1) .4s;will-change:opacity,transform}
.ani.vis{opacity:1;transform:translateX(0)}
.ani[ef=FI],.ani[ef=FI].vis{transform:none}
.ani[ef=FIL]{transform:translateX(-6rem)}
.ani[ef=FIL].vis{transform:translateX(0)}
.ani[ef=SIL]{transform:translateX(-8rem) scale(.2) translateY(-8rem)}
.ani[ef=SIL].vis{transform:translateX(0) scale(1) translateY(0)}
.ani[ef=SIR]{transform:translateX(16rem) scale(.2) translateY(26rem)}
.ani[ef=SIR].vis{transform:translateX(0) scale(1) translateY(0)}
.ani[ef=FID]{transform:translateY(-6rem)}
.ani[ef=FID].vis{transform:translateY(0)}
.ani[ef=FIU]{transform:translateY(10rem)}
.ani[ef=FIU].vis{transform:translateY(0)}
.ani[ef=SIU]{transform:translateY(16rem) translateX(13rem) scale(.2)}
.ani[ef=SIU].vis{transform:translateY(0) translateX(0) scale(1)}
.ani[ef=SU]{transform:scale(.2)}
.ani[ef=SU].vis{transform:scale(1)}
.ani[ef=SD]{transform:scale(2)}
.ani[ef=SD].vis{transform:scale(1)}
</style>

<script>
var anion=function(t){"use strict";var e=new IntersectionObserver((function(t){t.forEach((function(t){var e=t.target,n=parseInt(e.getAttribute("data-delay"))||0,i=e.getAttribute("data-duration")||null;t.intersectionRatio>0?setTimeout((function(){i&&(e.style.transitionDuration="".concat(i,", ").concat(i)),e.classList.add("vis")}),n):(e.classList.remove("vis"),e.style.removeProperty("transition-duration"))}))}));return t.anion=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:".ani",n=document.querySelectorAll(t);"IntersectionObserver"in window?n.forEach((function(t){e.observe(t)})):n.forEach((function(t){return t.classList.add("vis")}))},Object.defineProperty(t,"__esModule",{value:!0}),t}({});
</script>
<script>
anion.anion();
</script>

Contoh code penggunaan di html, adalah sebagai berikut:

0 <div ef="ani" ef="SIR"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFqukbnt2tUKvmg7ECPuOfulwAbaMrAxiIZFvNHS7DE-XkQIByu5-6Xi8gnhxNT7wSfkZWisTkcwOtDH1-HWDx6MDo-2FZdwEuWAFUQU_8RaZGWUDpjJ9lo42IGt3l14jde4X89oyrLw/s0/EasyFind_31070.png" /></div>
1 <div ><img class="ani" ef="SIL" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFqukbnt2tUKvmg7ECPuOfulwAbaMrAxiIZFvNHS7DE-XkQIByu5-6Xi8gnhxNT7wSfkZWisTkcwOtDH1-HWDx6MDo-2FZdwEuWAFUQU_8RaZGWUDpjJ9lo42IGt3l14jde4X89oyrLw/s0/EasyFind_31070.png" /></div>
2 <div class="ani" ><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFqukbnt2tUKvmg7ECPuOfulwAbaMrAxiIZFvNHS7DE-XkQIByu5-6Xi8gnhxNT7wSfkZWisTkcwOtDH1-HWDx6MDo-2FZdwEuWAFUQU_8RaZGWUDpjJ9lo42IGt3l14jde4X89oyrLw/s0/EasyFind_31070.png" /></div>
3 <div class="ani" ef="FID"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilFqukbnt2tUKvmg7ECPuOfulwAbaMrAxiIZFvNHS7DE-XkQIByu5-6Xi8gnhxNT7wSfkZWisTkcwOtDH1-HWDx6MDo-2FZdwEuWAFUQU_8RaZGWUDpjJ9lo42IGt3l14jde4X89oyrLw/s0/EasyFind_31070.png" /></div>

Semoga berguna.