! Сегодня

Главная » Web и Технологии » Падающий снег для сайта с сильным ветром

Падающий снег для сайта с сильным ветром

Если Вы стали для кого-то плохим, значит много хорошего было сделано для этого человека.

6-декабря-2023, 21:22   2   0

Падающий снег для сайта с сильным ветром

Продолжаем украшать веб ресурс к зимним праздникам. Сегодня нашел на просторах еще один скрипт метели для сайта. На сей раз мы используем одну картинку, её кстати можно заменить на любую понравившуюся. Сам снег разлетается от центра экрана в разные стороны, создаётся впечатление что ветер дует в лицо и вместе с ним метёт метель

HTML

<span>
<p><b><i>Blowy Snow</i></b></p>
</span>


CSS

body {
    background-image: radial-gradient(ellipse farthest-corner at center bottom, rgba(255,5,5,0.6) 5%, #000 100%);
    background-color:#000;
    background-size: 100% 100%;
    background-attachment: fixed;
}
span {
    display: inline-block;
    position: relative;
    padding: 4px;
    width: 200px;
    background-color: #770000;
    border-radius: 5px;
    font: 20px verdana;
    color: #fff; 
    text-align: center;
}
p {
    margin: 5px;
}


JS

(function(){
    //Blowy Snow

    var flakeNum = 250;
    var pic = new Image(20,20);
    pic.src = "https://lenger.kz/uploads/web/png.webp";
    var d = document;
    var deg = 180/3.14;
    var rad = 3.14/180;
    var idx = (typeof d.getElementsByTagName != "undefined")?d.getElementsByTagName('div').length:0;
    var f = {w:0,h:0,cx:0,cy:0,flake:[],x:[],y:[],cutRight:[],cutLeft:[],dst:[],size:[],vel:[],acc:[],blo:[],rate:[],rng:[],ang:[],counter:[]}

    var con = d.createElement('div');
    con.setAttribute('style','display:block;'
    +'position:fixed;'
    +'height:100%;width:100%;'
    +'margin:auto;padding:0px;'
    +'top:0;left:0;left:0;right:0;'
    +'overflow:hidden;' 
    +'visibility:hidden;');
    d.body.appendChild(con);

    for (var i = 0; i < flakeNum; i++) {
        f.counter[i] = 0;
        var img = d.createElement('img');
        img.setAttribute('id','flake'+(idx+i));
        img.setAttribute('src',pic.src);
        img.setAttribute('style','display:none;'
        +'position:absolute;'
        +'transform: translate3d(0px,0px,0)'
        +'height:5vh;width:5vh;'
        +'visibility:visible;');
        con.appendChild(img);
    }

    function win() {
        var ddw = d.documentElement.clientWidth;
        var ddh = d.documentElement.clientHeight;
        var scrollBarRight = (typeof ddw == 'number') ? window.innerWidth - ddw : 0;
        var scrollBarBottom = (typeof ddh == 'number') ? window.innerHeight - ddh : 0;
        f.h = window.innerHeight - scrollBarBottom -1;
        f.w = window.innerWidth - scrollBarRight -1;
        f.cy = f.h/2|0;
        f.cx = f.w/2|0;
    }

    function rsz() {
        win();
        for (var i = 0; i < flakeNum; i++) {
            f.flake[i].style.display = 'none';
            f.counter[i] = 0;
            rst(i);
        }
    }
    window.addEventListener("resize", rsz, false);

    function rst(s) {
        if (f.counter[s] > 1) {
            f.flake[s].style.display = 'block';
        }
        if (f.counter[s] < 2) {
            f.counter[s]++;
        }
        f.cutLeft[s] = 0 + Math.random() * f.cx/2;
        f.cutRight[s] = f.w - Math.random() * f.cx/2;
        f.y[s] = 0 + Math.random() * f.h;
        f.x[s] = (f.cx - f.cx/3) + Math.random() * f.cx/1.5;
        f.rng[s] = f.cx-100 + Math.random() * 200;
        var dy = (f.y[s] - f.cy/6);
        var dx = (f.x[s] - f.rng[s]);
        f.ang[s] = Math.atan2(dy,dx) * deg;
        f.dst[s] = 5 + (Math.sqrt(dy*dy + dx*dx));
        f.size[s] = 0.1;
        f.acc[s] = 0; 
        f.blo[s] = 0;
        f.vel[s] = (1.8 * (f.dst[s] / 2) / 100);             
        f.rate[s] = (-0.01 + Math.random() * 0.02);
    }

    function animate() {
        for (var i = 0; i < flakeNum; i++){
            f.y[i] += f.vel[i] * Math.sin((f.ang[i]) * rad);
            f.x[i] += f.vel[i] * Math.cos((f.ang[i]+=f.blo[i]) * rad);
            f.acc[i] = (f.vel[i] / (f.dst[i] + (400 * f.vel[i] / 100)) * f.vel[i]);
            f.vel[i] += f.acc[i];
            f.size[i] += ((f.vel[i] * 0.6) / (190 * f.dst[i] / 100));
            f.blo[i] += f.rate[i];
            if (f.y[i] < -f.cy/2) {
                f.ang[i]  *= -1;
            }
            if (f.x[i]+f.size[i] < f.cutLeft[i] || f.x[i] > f.cutRight[i] || f.y[i] > f.h || f.x[i] > f.w || f.x[i]+f.size[i] < 0){
                rst(i);
            }
            f.flake[i].style.transform = 'translate3d('+f.x[i]+'px, '+f.y[i]+'px,0) scale('+f.size[i]+')';
        }
    }

    function run() {
        requestAnimationFrame(run);
        animate();
    }

    function init() {
        win();
        for (var i = 0; i < flakeNum; i++){
            f.flake[i] = d.getElementById("flake"+(idx+i));
            rst(i);
        }
        run();
    }
    window.addEventListener("load",init,false);

})();

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Спутник земли ?

Редакторы выбирают

Web и Технологии