Если Вы стали для кого-то плохим, значит много хорошего было сделано для этого человека.
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);
})();