آموزش ایجاد افکت بارش برف در پس زمینه وب سایت

در این پست از وب سایت اسکریپت دات کام قصد آموزش ایجاد افکت بارش برف در پس زمینه وب سایت را دارم .

در زمان های قدیم با استفاده از جاوا اسکریپت کدی برای ریزش برف را داشتیم که بسیار ساده و غیر واقعی به نظر میرسید . اما حال با وجود 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 دانلود و به وب سایت خود اضافه نمایید .

دموی افکت

پخش اختصاصی

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