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

دموی افکت

پخش اختصاصی

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

این مدل لینک دهی در سایت wikipedia به وفور یافت میشود و به این معنا میباشد که شاید شما بخواهید کاربر پس از ورود به صفحه ی مورد نظر خود , به نقطه ای مشخص از آن صفحه برود . مثلا فرض کنید در یک تگ h1 در وب سایت خود دارید که میخواهید کاربر پس از کلیک بر روی لینک شما , به همان تگ h1 پرش کند . برای این کار باید مراحل زیر را انجام دهید .

اما این عمل سریعا انجام میشود که شما کاربران گرامی میتوانید با آموزشی که در ادامه قرار داده استفاده نمایید و این عمل را به آرامی و با اسکرول نرم انجام دهید

برای انجام اسکرول نرم کافیست کد زیر را در فایل html خود وارد نمایید . ( قبل از بسته شدن تگ <body/> مناسب تر میباشد .

نکته بسیار مهم : این کد به صورت جی کوئری می باشد . پس حتما باید کتابخانه جی کوئری بر روی وب سایت شما نصب باشد .

<script>
$(document).ready(function(e) {
	$("a[href*='#']").click(function(){
		$('html, body').animate({
			scrollTop: $( $.attr(this, 'href') ).offset().top
			}, 500);
		return false;
	});
});
</script>

توجه : شما میتوانید با تغییر عدد 800 در کد بالا , سرعت را کم یا زیاد نمایید و

دموی آماده کد

پخش اختصاصی

آموزش : وحید مجیدی

اکثر مرورگر ها از جمله مرورگر معروف Google Chrome , در هنگام مرور یک وب سایت مخصوصا با Mouse Wheel ( اسکرول چرخنده ای که در وسط اکثر ماوس ها وجود دارد ) , حرکت اسکرول سایت را به صورت پله ای و بدون افکت خاصی انجام میدهند .

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

برای این کار کافیست ابتدا فایل پلاگین Smooth Scroll را از اینجا دانلود و سپس فایل Smooth-Scroll.js که در درون آن قرار دارد را در هاست خود آپلود نمایید .

حل میبایست توسط تگ زیر که باید در فایل html خود قرار دهید , فایل بالا رو به سایت خود اضافه نمایید .

<script src="آدرس فایل جاوا اسکریپت که درون هاست قرار دارد"></script>

 قرار داشته باشد js به عنوان مثال اگر در پوشه ای به نام 

<script src="js/smooth-scroll.js"></script>

نکته : شما میتوانید این فایل را با یک نرم افزار ویرایشگر متن مانند Nothpad باز نموده و در خط اول آن تنظیماتی از جمله frameRate , animationTime , stepSize و … را به دلخواه خود تغییر دهید

پخش اختصاصی

آموزش و گرداوری : وحید مجیدی