Membuat Efek Animasi Hujan Salju Seperti Blog Arlinadzgn

Diposting pada

Cara Membuat Efek Animasi Hujan Salju Seperti Blog Arlinadzgn

Membuat Efek Animasi Hujan Salju Seperti Blog Arlinadzgn – Bagi kamu yang sering mengunjungi blog nya Mba Arlina, tentunya pasti melihat ada perubahan dalam segi tampilan pada blog nya. Ia telah memberikan nuansa efek animasi hujan salju yang menurut saya cukup menarik.

Sebenar nya sudah banyak sih berbagai cara membuat efek animasi hujan salju yang bisa kamu temui di pencarian google. Tapi saya yakin model efek animasi hujan salju seperti blog Arlinadzgn berbeda dengan yang lain nya.

Berhubung bulan ini masih bulan Desember dan masih anget-anget nya dengan nuansa Hari Natal, tidak ada salah nya kita mencoba untuk membuat efek animasi hujan salju di blog agar terlihat lebih menarik.

Dan bagi kamu yang ingin mencobanya, kamu bisa ikuti langkah-langkahnya sebagai berikut.

Membuat Efek Animasi Hujan Salju Seperti Blog Arlinadzgn

1. Copy kode CSS dibawah ini, lalu letakan kode tersebut tepat di atas kode </style> pada template kamu.

 .snow{position:fixed;top:0;left:0;right:0;pointer-events:none;z-index:20}.contentz{height:100%;position:relative;overflow:hidden;z-index:1}

2. Selanjut nya copy kode dibawah ini, letakan kode tersebut tepat di atas kode </body>.

 <div class='contentz'>
<canvas class='snow' id='snow'/>
</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("snow"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>

3. Simpan template kamu dan lihat hasilnya.

Itulah Cara Membuat Efek Animasi Hujan Salju Seperti Blog Arlinadzgn yang bisa kamu coba agar tampilan blog kamu terlihat lebih menarik di bulan desember ini. Bila ada pertanyaan menyangkut isi dari artikel di atas, silahkan tinggalkan komentar kamu dibawah. Dan jangan lupa untuk bagikan artikel ini ke teman-teman di Social Media.

Note: Harap backup Template kamu terlebih dahulu sebelum kamu melakukan tutorial di atas. Untuk menjaga sesuatu yang tidak kita ingin kan.

One thought on “Membuat Efek Animasi Hujan Salju Seperti Blog Arlinadzgn

  1. With a great eye and taste for delineation, you can create a place impeccable for any exercises connected with feasting room.
    Leonardo Da Vinci was given birth to in the Florentine Republic on April 15th,
    1452. The public also serves enormous events from all regions
    of the globe.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *