با سلام
این اولین آموزش سایت طراح سایت است که در اختیارتون قرار میدهیم.
در این آموزش بکگراند یا پس زمینه متحرک به تگ ها و یا کلاس ها و آدی ها مدهیم.
خوب اول بهتراست دموی را مشاهده کنید
در ابتدا شما در بین تگ <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 را هم فراخوانی کردم .
فایل نهایی آموزش را هم می تونید دانلود کنید :
امید وارم به دردتون خورده باشه .
موفق باشید.
یاعلی.