دانلود اسکریپت بکگراند متحرک

اسکریپت پس زمینه متحرک (بکگراند متحرک)

با سلام

این اولین آموزش سایت طراح سایت است که در اختیارتون قرار میدهیم.

در این آموزش بکگراند یا پس زمینه متحرک به تگ ها و یا کلاس ها و آدی ها مدهیم.

خوب اول بهتراست  دموی را مشاهده کنید

دموی آموزش

در ابتدا شما در بین تگ <head> فایل تابع کتابخانه ای جی کوئری ا فراخوانی می کنید

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

خوب  حال شما کد های html  خود را بنویسید مثلا کد هایی که ما نشتیم :

	<body>
		<div id="container">
			<div id="header">
					<h1>بکگراند متحرک</h1>	<br />

			</div><!-- #header -->

			<div id="content">
				برای دیدن اسکریپت های زیبا از سایت 
: <a href="http://www.tarahsite.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.tarahsite.net </a> دیدن کنید

					<h1 class="footer">طراح سایت  
: <a href="http://www.tarahsite.net/" title="طراحی ارزان سایت های وردپرس ">www.tarahsite.net </a> </h1>


	<div class="box">
		این یه جعبه تست است که می تونه یکی از کلاس ها ویا آیدی های شما باشد
	
	</div>


			</div><!-- #content -->
		</div><!-- #container -->
	</body>

یه استایل قشنگ بهش میدیم و برای جا هایی که می خوای بکگراند می زاریم اینم کد های استایلش :

body{
				background-color: #C0DEED;
				margin:0;
				padding:0;
				direction:rtl;
				font-family: 'BYekan';
			}
			
			#header{
				height:180px; 
				background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
				text-align:center;
				margin-top:-30px;
				font-family: 'BYekan';
			}
			
			#header h1{
				padding-top:35px;
				color:white;
				font-size:45px;
				font-family: 'BYekan';
			}
			
			#content{
				background-color:#fff;
				height:310px;
				width:980px;
				margin:25px auto 0 auto;
				-moz-border-radius:10px;
				-webkit-border-radius:10px;
				font-family: 'BYekan';
			}
			.footer{
				width:200px;
				text-align:center;
				margin:0px auto;
				left:0px;
				right:0px;
			}
			.box{
				height:180px;
				width:250px;
				background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
				text-align:center;
				margin:0px auto;
				left:0px;
				right:0px
				font-family: 'BYekan';
				border:solid 1px #87BAFF;
				border-radius:8px;
				box-shadow:1px 1px 4px #9ED6ED;
			}
			.box:hover{
				border-radius:10px;
				box-shadow:1px 1px 8px #9ED6ED;
				}
			@font-face {
				font-family: 'BYekan';
				src: url('fonts/BYekan.eot');
				src: url('fonts/BYekan.eot?#') format('eot'), url('fonts/BYekan.woff') format('woff'), url('fonts/fonts/BYekan.ttf') format('truetype'), url('fonts/BYekan.svg#BYekan') format('svg');
			}
			@font-face {
				font-family: 'BNazanin';
				src: url('fonts/BNazanin.eot');
				src: local('☺'), url('fonts/BNazanin.ttf') format('truetype'), url('fonts/BNazanin.woff') format('woff');
			}

 

خوب الان من می خوام که بکگراند آیدی header متحرک باشد خوب حال نوبت یه کد های جیکوئری است :

	<script type="text/javascript" charset="utf-8">
			var scrollSpeed = 1; 		// سرعت بکگراد متحرک
			var step = 1; 				// چگونگی رفتن به مرحله بعد
			var current = 0;			// The current pixel row
			var imageWidth = 2247;		// عرض تصویر بکگراند
			var headerWidth = 1280;		// 
			
			//برای شروع دوباره
			var restartPosition = -(imageWidth - headerWidth);
			
			function scrollBg(){
				//به مرحله بعدی برو
				current -= step;
				
				//در پایان عکس دوباره شروع میکند
				if (current == restartPosition){
					current = 0;
				}
				
				//فرا خواندن استایل آیدی و یا کلاس که قرار است متحرک شود
				$('#header').css("background-position",current+"px 0");
				$('.box').css("background-position",current+"px 0");
			}
			
			//
			var init = setInterval("scrollBg()", scrollSpeed);
	</script>

در کد های بالا چند تا تنطیمات وجو داره مثلا سرعت حرکتش را می تونید در قسمت var scrollSpeed = 1; با کم و زیاد کردن ۱ بالا و پایین ببرید.

نکنته بعدی اینکه اگر شما خواستید هر آیدی و یا کلاسی  را بکگراندش را متحرک سازید باید با دستور

$('#header').css("background-position",current+"px 0");

در قسمت :

//فرا خواندن استایل آیدی و یا کلاس که قرار است متحرک شود

در پرانتز عنصر مورد نظرتون  آدی را با # و کلاس را با .  فراخوانی کنید. مثلا من کلاس box  را هم فراخوانی کردم .

 

فایل نهایی آموزش را هم می تونید دانلود کنید :

 

دانلود فایل آموزش

 

امید وارم به دردتون خورده باشه .

موفق باشید.

یاعلی.

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.