Animación de copos de nieve con JQuery adaptada del plugin Snow Effect

JS
$(function(){
    
    var flakeColor = 'white';
    var minSize    = 3;
    var maxSize    = 30;
    var newOn      = 500;
    
    var $flake = $('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;');
    
    var documentHeight = $(document).height();
    var documentWidth  = $(document).width();
    
    $('body').css({background:'#3498db'});
        
    var interval = setInterval(function(){
    
        const startPositionLeft = Math.random()*documentWidth-100;
        const startOpacity      = 0.5 + Math.random();
        const sizeFlake         = minSize + Math.random()*maxSize;
        const endPositionTop    = documentHeight - 40;
        const endPositionLeft   = startPositionLeft - 100 + Math.random()*200;
        const durationFall      = documentHeight * 10 + Math.random()*5000;
        
        $flake.clone().appendTo('body').css({
            left        : startPositionLeft,
            opacity     : startOpacity,
            'font-size' : sizeFlake,
            color       : flakeColor
            
        }).animate({
            top:endPositionTop,
            left:endPositionLeft,
            opacity:0.2
        },durationFall,'linear',function(){
            $(this).remove()
        });
        
    },newOn);
        
});

/*
    Es una versión adaptada de: jquery.snow - jQuery Snow Effect Plugin
    Todo los créditos para : Ivan Lazarevic
*/

Autor: Washi

Publicado: 19/12/2020

Compartir Elemento Web

Donar a Compositu
Otras formas de ayudar
  • Compártelo en tus redes sociales.
  • Recomienda los elementos.
  • Regístrate Aquí
  • Deja tu comentario agradeciendo el aporte.

Descarga el código completo del Elemento Web y archivos necesarios (imágenes, librerias, plugins, frameword, etc)

Deja tu comentario