Эффект падающего снега на сайте с плавной анимацией и перспективой

Создайте зимнюю атмосферу на вашем сайте с помощью адаптивного эффекта падающего снега.

Лёгкие снежинки с плавной анимацией и эффектом размытия добавят уют и привлекут внимание пользователей.

Код идеально подходит для белого и тёмного фона, прост в установке и адаптируется под любые устройства.

See the Pen Снег by SATAMAX.RU (@lvpzgyft-the-typescripter) on CodePen.

        HTML

  
  Показать код HTML
  
    
  <div id="snow"></div> <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>

        CSS
 
  
  Показать код CSS
  
         
#snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

        JS
       

  
  Показать код JS
  
    
       // Автор кода SATAMAX.RU [https://satamax.ru]
particlesJS('snow', {
    particles: {
        number: {
            value: 250, // Увеличенное количество снежинок
            density: { enable: true, value_area: 1000 }
        },
        color: { value: "#ffffff" }, // Белые снежинки
        shape: {
            type: "circle",
            stroke: { width: 0, color: "#000000" }
        },
        opacity: {
            value: 0.8, // Прозрачность снежинок
            random: true, // Случайная прозрачность
            anim: { enable: false }
        },
        size: {
            value: 2, // Средний размер снежинок
            random: true,
            anim: { enable: false }
        },
        line_linked: { enable: false }, // Убираем линии между частицами
        move: {
            enable: true,
            speed: 2, // Скорость падения снежинок
            direction: "bottom",
            random: true,
            straight: false,
            out_mode: "out",
            bounce: false
        }
    },
    interactivity: {
        events: { onhover: { enable: false }, onclick: { enable: false } },
        modes: { bubble: { distance: 400 }, repulse: { distance: 200 } }
    },
    retina_detect: true
});
 
// Добавляем размытие для случайных снежинок
const addBlurEffect = () => {
    const canvas = document.querySelector('.particles-js-canvas-el');
    const ctx = canvas.getContext('2d');
    const originalDrawImage = ctx.drawImage;
 
    ctx.drawImage = function () {
        const isBlur = Math.random() > 0.7; // Применяем размытие к 30% снежинок
        if (isBlur) {
            this.filter = 'blur(2px)';
        } else {
            this.filter = 'none';
        }
        originalDrawImage.apply(this, arguments);
    };
};
 
window.onload = addBlurEffect;