. .
[iklan]

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://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>
1 <div ><img class="ani" ef="SIL" alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>
2 <div class="ani" ><img alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>
3 <div class="ani" ef="FID"><img alt="" src="https://1.bp.blogspot.com/-8lipPaP2SfY/YQHZpZhYCJI/AAAAAAAAUjU/V67j83I5NNYiqrPd62lF1CLXKXZ5nKzYQCLcBGAsYHQ/s0/EasyFind_31070.png" /></div>





Semoga berguna.

0 comments:

Posting Komentar

Catatan Sementara

Assalamualaikum warahmatullahi wabarakatuh Bismillahirrohmanirrohim رَبَّنَا ظَلَمْنَاۤ اَنْفُسَنَا وَاِ نْ لَّمْ تَغْفِرْ لَـنَا وَتَرْحَمْنَا لَـنَكُوْنَنَّ مِنَ الْخٰسِرِيْنَ "Ya Tuhan kami, kami telah menzalimi diri kami sendiri. Jika Engkau tidak mengampuni kami dan memberi rahmat kepada kami, niscaya kami termasuk orang-orang yang rugi." (QS. Al-A'raf 7: Ayat 23). Ya Rahman ya Rahim, Jagalah kami dari neraka JahanamMu yg amat dahsyat. Sungguh, kami tidak akan mampu menjadi penghuninya, walau hanya sesaat. Yaa Aziz aku mohon , kembalikan kami smua di dlm Husnul khotimah.. Yaa ghofar ampuni dosa kedua orang tua kami , sdr2 kami serta orang2 Sholeh dan masukkan klg kami smua dlm surga-Mu . Aamiin 🤲
 
© 2021 Catatan Afandi Kusuma | www.suwur.com | Furniture.Omasae | JayaSteel | OmaSae | suwur | Galvalum | DepoAirIsiUlang | Seluruh Arsip