أخر الاخبار
بلوجر
0

اضافة تأثير سقوط الثلج للبلوجر

صورة
تقني
اخر تحديث :
اضافة تأثير سقوط الثلج للبلوجر
اضافة تأثير سقوط الثلج للبلوجر

 مرحبا اصدقائي، اتمنى ان تكونوا بصحة وعافية.
باختصار تدوينتنا اليوم عبارة عن اضافة تأثير سقوط الثلج على مدونات بلوجر اضافة خفيفة على الموقع لا تأثر في تحميله وتضفي رونق فصل الشتاء أترككم مع المعاينة والتطبيق

معاينة


شرح طريقة التركيب1. سجل الدخول إلى مدونتك
2. المظهر >> تعديل HTML
3. ابحث عن <body> باستخدام CTRL+F
4. ضع الكود التالي قبل
<style>
.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}
</style>
<div class='contentz'>
<canvas class='snow' id='snow'></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("snow"))},"loading"!=document.readyState?n():document.addEventListener("DOMContentLoaded",n)}();
//]]>
</script>
تعديل المقال
الأقسام

مقالات قد تهمك

تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -