Падающий снег script

Анимированный эффект снегопада, созданный с помощью простой анимации JavaScript и canvas.

Настройте эффект снегопада прямо в JavaScript.

Настройки с пояснением:

var COUNT = 101; /* плотность снега */ var snowContainer = document.querySelector('#body'); /* id блока где будет падать снег */ ctx.fillStyle = '#c0c0c0'; /* цвет снега */ this.vy = 1 + Math.random() * 3; /* скорость падения 1 и 2 снега */ this.vx = 0.5 - Math.random(); /* скорость и направление бокового ветра */ this.r = 1 + Math.random() * 2; /* размер снежинок 1 и 2 */ canvas.style.opacity = '0.8'; /* прозрачность снега */ canvas.style.zIndex = '-1'; /* индекс, приоритет наложения слоя */ canvas.style.filter = 'blur(1px)'; /* размытие снега */

Пример для сайта

Анимированный эффект снегопада, созданный с помощью простой анимации JavaScript и canvas.

Единство стиля в дизайне меню подразумевает узнаваемость, а не скучный шаблонный вид для всех разделов, рубрик, страниц сайта. Узнаваемость выражается в стиле, деталях оформления и необходима для продвижения бренда, а набор отличных по дизайну страниц нельзя назвать стильным дизайном

Добавьте JavaScript прямо на страницу или сохраните в отдельный файл snow.js и подключите <script src="site/location/snow.js"></script>

Анимированный эффект снегопада JavaScript и canvas.

 
   <script>    
   /* Snow снег падающий */    
     (function () {    
     var COUNT = 101;       /* плотность снега */    
     var snowContainer = document.querySelector('#body');       /* id блока где будет падать снег */    
     var canvas = document.createElement('canvas');    
     var ctx = canvas.getContext('2d');    
     var width = snowContainer.clientWidth;    
     var height = snowContainer.clientHeight;    
     var i = 0;    
     var active = false;    
     function onResize() {    
       width = snowContainer.clientWidth;    
       height = snowContainer.clientHeight;    
       canvas.width = width;    
       canvas.height = height;    
       ctx.fillStyle = '#c0c0c0';       /* цвет снега */    
       requestAnimFrame(update);    
     }    
     var Snowflake = function () {    
       this.x = 0;    
       this.y = 0;    
       this.vy = 0;    
       this.vx = 0;    
       this.r = 0;    
       this.reset();    
     }    
     Snowflake.prototype.reset = function() {    
       this.x = Math.random() * width;    
       this.y = Math.random() * -height;    
       this.vy = 1 + Math.random() * 3;       /* скорость падения 1 и 2 снега */    
       this.vx = 0.5 - Math.random();       /* скорость и направление бокового ветра */    
       this.r = 1 + Math.random() * 2;       /* размер снежинок 1 и 2 */    
       this.o = 0.5 + Math.random() * 0.5;    
     }    
     canvas.style.position = 'absolute';    
     canvas.style.left = canvas.style.top = '0';    
     canvas.style.opacity = '0.8';       /* прозрачность снега */    
     canvas.style.zIndex = '-1';       /* индекс, приоритет наложения слоя  */    
     canvas.style.filter = 'blur(1px)';       /* размытие снега */    
     var snowflakes = [], snowflake;    
     for (i = 0; i < COUNT; i++) {    
       snowflake = new Snowflake();    
       snowflake.reset();    
       snowflakes.push(snowflake);    
     }    
     function update() {    
       ctx.clearRect(0, 0, width, height);    
       for (i = 0; i < COUNT; i++) {    
         snowflake = snowflakes[i];    
         snowflake.y += snowflake.vy;    
         snowflake.x += snowflake.vx;    
         ctx.globalAlpha = snowflake.o;    
         ctx.beginPath();    
         ctx.arc(snowflake.x, snowflake.y, snowflake.r, 0, Math.PI * 2, false);    
         ctx.closePath();    
         ctx.fill();    
         if (snowflake.y > height) {    
           snowflake.reset();    
         }    
       }    
       requestAnimFrame(update);    
       }    
     window.requestAnimFrame = (function(){    
       return  window.requestAnimationFrame       ||    
               window.webkitRequestAnimationFrame ||    
               window.mozRequestAnimationFrame    ||    
               function( callback ){    
                 window.setTimeout(callback, 1000 / 60);    
               };    
     })();    
     onResize();    
     window.addEventListener('resize', onResize, false);    
     snowContainer.appendChild(canvas);    
   })();    
   </script>    
   

codepen