پروژه بارش برف زیبا در وبلاگ یا سایت
یکی از زیبایی های وبلاگ شما میتواند بارش برف در ان باشد در این پست کدی را دریافت میکنید که باعث بارش برف در صفحه وب شما میشود جالب است بدانید این کد تماما جاوااسکریپت است.
بعضی از سایت هایی را مشاهده کردید که صحنه ای مثل زیر که می بینید، مواجه می شوید. در اینجا تنها از کد جاوا اسکریپت برای نمایش بارش برف به کار برده شده است. بله، بسیار دلنشین است، از استفاده سورس کد آن لذت ببرید.
نمونه ی کد جاوا اسکریپت:
<html>
<body background="https://www.shahcode.com/wp-content/uploads/2021/02/land.jpg">
<script language="JavaScript">
//Pre-load your image below!
grphcs=new Array(6)
Image0=new Image();
Image0.src=grphcs[0]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png";
Image1=new Image();
Image1.src=grphcs[1]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image2=new Image();
Image2.src=grphcs[2]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image3=new Image();
Image3.src=grphcs[3]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image4=new Image();
Image4.src=grphcs[4]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image5=new Image();
Image5.src=grphcs[5]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image6=new Image();
Image6.src=grphcs[6]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image7=new Image();
Image7.src=grphcs[7]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image8=new Image();
Image8.src=grphcs[8]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Image9=new Image();
Image9.src=grphcs[9]="https://www.shahcode.com/wp-content/uploads/2021/02/snow.png"
Amount=100; //Smoothness depends on image file size, the smaller the size the more you can use!
Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all)?1:0;
if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= Math.random()*5+3;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function winter(){
var WinHeight=(ns||ns6)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:document.body.scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] > WinHeight){
Ypos[i]=-60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=Math.random()*5+1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i];
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i]);
document.getElementById("si"+i).style.top=Ypos[i]+hscrll;
}
else{
eval("document.all.si"+i).style.left=Xpos[i];
eval("document.all.si"+i).style.top=Ypos[i]+hscrll;
}
Cstep[i]+=Step[i];
}
setTimeout('winter()',35);
}
window.onload=winter
</script>
</body>
</html>
حمزه
29 بهمن 1399
سلام. چرا عکس برف حذف شده.من از این کد در وبلاگم استفاده یکردم که عکسهای برف رفته.