Pada kesempatan kali ini, saya akan membagikan tutorial Cara Memasang Animasi atau Efek Salju di Blog. Animasi salju memang sempat menjadi trend di kalangan blogger untuk membuat halaman web semakin hidup.
Efek salju atau snow effect adalah efek visual yang menciptakan ilusi salju yang berjatuhan pada sebuah halaman web. Animasi ini dapat digunakan dengan bantuan script seperti HTML, CSS, dan JavaScript.
Untuk menciptakan efek salju di halaman blog, kamu dapat menggunakan plugin atau script yang banyak tersedia di internet. Kurang lebih tampilannya akan seperti berikut:
Sebelum memulai, pastikan kamu memiliki pengetahuan dasar tentang CSS dan JavaScript untuk mengatur tampilan salju sesuai keinginan. Tapi jika tidak ingin repot, kamu bisa menggunakan script dan tutorial berikut ini.
Cara Memasang Animasi atau Efek Salju di Blog
- Masuk ke BLOGGER
- Pilih menu TEMA
- Pilih EDIT HTML
- Tempel di atas </body>:
- Tempel di atas ]]></b:skin> atau </style>:
- Selesai.
<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>/* Snow Effect by www.ferisp.com */
.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}Setelah memasang script di atas, jangan lupa mengecek apakah animasi berjalan atau tidak. Untuk tampilan yang lebih beragam, kamu bisa memodifikasi script CSS sesuai keinginan.
Kapan Harus Menggunakan Efek Salju di Blog
Meskipun tergolong animasi jadul, ternyata efek ini masih sering digunakan khususnya pada waktu-waktu tertentu, contohnya saat musim dingin atau perayaan natal. Dengan begitu, pengunjung akan memberikan kesan positif dan betah untuk berlama-lama di blog kita.
Penutup
Mungkin ada yang bertanya, apakah memasang efek salju memberatkan loading blog? Sepertinya iya. Seperti yang telah dijelaskan di atas, kita menggunakan JavaScript agar animasi dapat berjalan atau bekerja.
Namun untuk mengakali masalah tersebut, kamu bisa menggunakan lazy load untuk menampilkan efek ini. Efek hanya akan muncul setelah halaman discroll.
Cukup sekian artikel tentang Cara Memasang Animasi atau Efek Salju di Blog ini, Terima kasih.
Referensi Code:
www.adityatekno.com / https://tinyurl.com/2p8aexde