Hallo semuanya, selamat datang di blog Ruls z, kali ini kami akan membagikan tutorial lagi yaitu Cara Memasang Animasi Atau Efek Salju di Blogger, untuk animasi salju dulu sempat rame dipake para blogger biar blognya keliatan lebih keren.
Efek salju adalah efek visual yang menampilkan animasi salju berjatuhan pada sebuah halaman web, Efek ini dapat digunakan hanya dengan bantuan HTML, CSS dan Javascript saja.
Untuk membuat animasi salju di blog kalian, kalian dapat menggunakan script yang banyak di bagikan di internet, atau bisa kalian gunakan script yang sudah kami sediakan di bawah ini, sebelum memulai kalian bisa lihat dulu tampilannya di bawah ini:
Sebelum memulai tahab awal, pastikan kalian paham dengan dasar CSS dan Javascript untuk mengatur tampilan sesuai keinginan kalian, atau jika kalian tidak ingin repot, kalian gunakam saja script yang sudah kami sediakan di tutorial kali ini.
Cara Memasang Animasi Atau Efek Salju di Blogger
Langkah 1: Pertama kalian login terlebih dahulu ke Blogger >> Tema >> Edit HTML.
Langkah 2: Selanjutnya kalian salin kode dibawah ini dan tempel di atas </body>.
<div class="snowEffect"> <canvas class="snowClass" id="snowId"></canvas> </div> <script> //<![CDATA[ !function(){function t(t){var n=t.getContext("2d"),e=0,i=0,o=[],d=function(){this.x=this.y=this.dx=this.dy=0,this.reset()};function a(){e=window.innerWidth,i=window.innerHeight,t.width=e,t.height=i,function(t){if(t!=o.length){o=[];for(var n=0;n<t;n++)o.push(new d)}}(e*i/1e4)}d.prototype.reset=function(){this.y=Math.random()*i,this.x=Math.random()*e,this.dx=1*Math.random()-.5,this.dy=.5*Math.random()+.5},a(),function t(){n.clearRect(0,0,e,i),n.fillStyle="rgba(238,238,238,.5)",o.forEach(function(t){t.y+=t.dy,t.x+=t.dx,t.y>i&&(t.y=0),t.x>e&&(t.reset(),t.y=0),n.beginPath(),n.arc(t.x,t.y,5,0,2*Math.PI,!1),n.fill()}),window.requestAnimationFrame(t)}(),window.addEventListener("resize",a)}var n;n=function(){t(document.getElementById("snowId"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}() //]]> </script>Langkah 3: Setelah itu kalian salin CSS di bawah ini dan tempel di atas ]]></b:skin>
/* Snow Effect by www.rulsz.eu.org */ .snowClass{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20} .snowEffect{position:relative;height:100%;overflow:hidden;z-index:1}Langkah 4: Langkah terakhir kalian simpan tema dan lihat hasilnya.
Setelah mengikuti tahab diatas silahkan kalian cek dulu tampilannya berhasil atau tidak. jika kalian tidak suka dengan tampilan animasinya, kalian hanya perlu mengubah CSS sesuai dengan keinginan kalian.
Penutup
Oke itulah postingan yang dapat kami bagikan saat ini, jika ada salah dengan postingan kali ini silahkan kalian laporkan dengan komentar di bawah ini.
