سبد خرید

بستن سبد خرید

سبد خرید شما خالی است.

تعداد محصول: 0 کل قیمت: تومان0

کد بارش برف در وبلاگ یا سایت

پروژه بارش برف زیبا در وبلاگ یا سایت

یکی از زیبایی های وبلاگ شما میتواند بارش برف در ان باشد در این پست کدی را دریافت میکنید که باعث بارش برف در صفحه وب شما میشود جالب است بدانید این کد تماما جاوااسکریپت است.

بعضی از سایت هایی  را مشاهده کردید که صحنه ای مثل زیر که می بینید، مواجه می شوید. در اینجا تنها از کد جاوا اسکریپت برای نمایش بارش برف به کار برده شده است. بله، بسیار دلنشین است، از استفاده سورس کد آن لذت ببرید.

نمونه ی کد جاوا اسکریپت:

<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>

 

پست های مشابه

19تیر 1400

CSS چیست و نقش آن در طراحی وب سایت که در این پست، طراحی و ساخت سایت را توضیح می دهیم، پس با ما همراه باشید. امروزه نرم افزارهایی برای طراحی وب سایت پدید آمده است که این امکان را می دهد که حتی بدون نیاز به دانش برنامه نویسی وب سایتی تولید و توسعه […]

63

0

28خرداد 1400

نمایش لودینگ یا نوار بارگذاری با CSS ، در این مقاله نحوه ی پروژه ایجاد لودینگ یا نوار بارگذاری کامل صفحه وب که با CSS نوشته شده را توضیح میدهیم.نمایش لودینگ صفحه یا بارگذاری کامل آن Preloader

93

0

27خرداد 1400

این پروژه ی بوم برخورددهنده به این صورت است که وقتی بوم ها یا مربع ها باهم برخورد می کنند…

39

0

دیدگاه و پرسش


حمزه

29 بهمن 1399

سلام. چرا عکس برف حذف شده.من از این کد در وبلاگم استفاده یکردم که عکسهای برف رفته.

    شاه‌کد

    29 بهمن 1399

    باسلام
    باید عکس‌های برف را دانلود و در کد استفاده کنید.
    ممنونم

حمزه

1 اسفند 1399

خب یا فایل عکس برف رو بدید یا لینک بدید دانلود کنم بزارم تو سایت خودم.
ممنونم.

    شاه‌کد

    2 اسفند 1399

    با سلام، لینک کدها بروزرسانی شده است، یعنی تغییر داده شده است. میتوانید مجدد از کدها استفاده نمایید.
    خواهش می کنم.