إضافة تأثير سقوط ثلج إلى مدونات و المواقع

كود إضافة تأثير سقوط ثلج لمدونات بلوجر و مواقع إضافة مميزة وجديدة خفيفة جدا و لن تأثر على سرعة موقعك MDW

سلام عليكم ورحمة الله وبركاته و بعد في إطار إضافات الموقع و مدونات ودلك بمناسبة إحتفال برأس السنة جديدة 2019 قررت أن انقل لكم طريقة إضافة سقوط ثلج في مدونتك أو موقعك يمكنك معاينة بطبيعة الحال

معاينة


طريقة إضافة سقوط الثلج إلى مدونتك


  1. أدخل إلى مدونتك
  2. تم قالب إبحث عن <body>بإستخدام ctrl + f
  3. تم ضع كود التالى فوقه

<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>

وما بقي لى سوى أن أقول لك مبروك عليك إضافة و شكرا على المتابعة المصدر : مدونة عرب ويب (أصلية)
محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام
رسائل أحدث رسائل أحدث

المنشورات ذات الصلة

4 تعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق

● أن يكون التعليق خاص بمحتوى التدوينة
● أن لا تضع أي روابط خارجية
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا
● يمكنك تعليق بإستخدام صور ✋👇
  1. https://3.bp.blogspot.com/-egIdXzETGS0/W_52p1mTJwI/AAAAAAAAEZM/LHM0dEdsNu0ux8yZTknBY0BR11LTCEyjACK4BGAYYCw/s1600/logoar1books.png

    ردحذف
  2. طيب ازاي تغير لون الثلج عشان مش ظاهر قوي في الموقع

    ردحذف
    الردود
    1. سنحاول إضافة دلك في تحديتاتنا قادمة 😂

      حذف