Sebenarnya efek salju berjatuhan seperti ini sudah banyak diterapkan oleh blogger jaman dahulu dan bahkan cukup populer pada waktu itu. Baik itu blogger pemula maupun blogger kelas master sekalipun.
Baca Juga : Cara Membuat Animasi Slide Button di Postingan Blog
Namun, entah mengapa efek salju di dunia blogger saat ini jadi begitu tidak populer, hanya beberapa orang saja yang menggunakannya. Mungkin banyak orang yang mengatakan bahwa memasang efek salju dikatakan sebagai pemula atau ada juga yang bilang menghalangi pandangan pembaca.
Baca Juga : Cara Membuat Pita dengan CSS di Postingan Blog
Akan tetapi, dipostingan ini saya akan membagikan cara membuat efek salju berjatuhan versi terbaru pada blog, terlihat indah, tidak menghalangi pandangan pembaca dan tidak terlalu memberatkan proses memuat (loading) blog.
Baca Juga :
- Cara Mempercepat Loading Blog dengan Memasang DNS Prefetch
- Cara Mempercepat Loading Blog dengan Expires Headers
- Cara Mempercepat Loading Blog Blogger
Efek salju ini saya gunakan pada saat menjelang tahun baru, agar suasana musim salju bisa dinikmati di dalam blog.
Nah, bagi anda yang tertarik menerapkannya di blog, silahkan ikuti langkah-langkah dibawah ini.
Cara Memasang Efek Salju Berjatuhan di Blog versi Terbaru
Pertama, buka Blogger >> Tema >> Edit HTML.
Kemudian, letakkan kode berikut ini tepat di atas kode </body>
<div class='snowsand'>
<canvas class='snowball' id='snowball'></canvas>
</div>
<script type='text/javascript'>
//<![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(255,255,255,.3)",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("snowball"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>Setelah itu letakkan kode ini tepat di atas kode </head>
<style type='text/css'>
/* Efek Salju Berjatuhan */
.snowball{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}
.snowsand{height:100%;position:relative;overflow:hidden;z-index:1}
</style>Lalu Simpan Tema.
Untuk melihat hasilnya seperti apa, bisa di cek dibawah:
See the Pen
Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru by AdityaTekno (@AdityaTekno)
on CodePen.
Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru by AdityaTekno (@AdityaTekno)
on CodePen.
Perlu anda ketahui, sebetulnya ada banyak cara untuk mempercantik tampilan blog kita, misalnya seperti memasang efek bintang, efek bunga sakura, efek daun berjatuhan atau kalo tidak ya mengganti template blog yang lebih hidup.
Demikian tutorial Cara Membuat Efek Salju Berjatuhan di Blog versi Terbaru. Semoga bisa bermanfaat dan terima kasih sudah berkunjung. Salam AdityaTekno.com
sumber:
https://www.bungfrangki.com/2015/07/kumpulan-widget-efek-salju-bintang-berjatuhan.html
https://www.analisyuki.com/2018/12/cara-membuat-efek-salju-di-blog.html