در زمان های قدیم با استفاده از جاوا اسکریپت کدی برای ریزش برف را داشتیم که بسیار ساده و غیر واقعی به نظر میرسید . اما حال با وجود Css3 و جی کوئری میتوانیم افکت ریزش برف در وب سایت را به صورت حرفه ای تر و در فضای واقعی تر در وب سایت داشته باشیم .

و اما آموزش :

در ابتدا تگ html زیر را در داخل تگ body وب سایت خود قرار دهید. ( ترجیحا اولین خط بعد تگ body )

<div id="snow_vms"></div>

حال کد های زیر را در فایل css خود قرار دهید .

body {
	margin:auto;
	padding:0;
	min-height: 100vh;
	background: linear-gradient(#6490FF,#4567F1);
	background: #0e68b2;
	background: -moz-linear-gradient(-36deg,  #0e68b2 0%, #4d8fd1 100%);
	background: -webkit-linear-gradient(-36deg,  #0e68b2 0%,#4d8fd1 100%);
	background: linear-gradient(135deg,  #0e68b2 0%,#4d8fd1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e68b2', endColorstr='#4d8fd1',GradientType=1 );
}
#snow_vms {
	position:fixed;
	margin:auto;
	left:-50%;
	bottom:0;
	width:150%;
	height:100%;
	overflow:hidden;
}
#snow_vms .snow{
	position:absolute;
	margin:auto;
	top:0;
	left:0;
	width:3px;
	height:3px;
	background:#fff;
	border-radius:100%;
	opacity:0.5;
	-webkit-animation:15s movesnow_vms linear infinite;
	-moz-animation:15s movesnow_vms linear infinite;
	animation:15s movesnow_vms linear infinite;
	animation-delay:-1s;
}
@-webkit-keyframes "movesnow_vms" {
	0%{opacity:0;}
	10%{opacity:0.5;}
	90%{opacity:0.5;}
	100%{-webkit-transform:translate3d(500px,50px,0);opacity:0;}
}
@-moz-keyframes movesnow_vms {
	0%{opacity:0;}
	10%{opacity:0.5;}
	90%{opacity:0.5;}
	100%{-moz-transform:translate3d(500px,50px,0);opacity:0;}
}
@keyframes movesnow_vms {
	0%{opacity:0;}
	10%{opacity:0.5;}
	90%{opacity:0.5;}
	100%{transform:translate3d(500px,50px,0);opacity:0;}
}

و در آخر نوبت اضافه نمودن کد جی کوئری وب سایت می باشد .

بهترین مکان برای قرار دادن , آخر تگ body , و قبل از بسته شدن آن میباشد .

<script>
(function(){
  var Dsnow = '';
  for(var i=0;i<600;i++) {
    var y = Math.floor(Math.random()*100),
        x = Math.floor(Math.random()*100),
        s = Math.floor(Math.random()*10) + 0.5;
    Dsnow += '<div class="snow" style="top:'+y+'%;left:'+x+'%;-webkit-animation-duration:' + s + 's;"></div>';
  }
  $('#snow_vms').html(Dsnow);
})();
if(location.href.length != 100){
setTimeout(function(){
   window.location.reload(1);
}, 50000);
}
</script>

نکته بسیار مهم : کاملا بدیهی است که شما باید فایل کتابخانه Jquery را از وب سایت Jquery.com دانلود و به وب سایت خود اضافه نمایید .

دموی افکت

پخش اختصاصی

گردآوری : وحید مجیدی