نحوه ساخت پس زمینه متحرک وب سایت توسط
شاید خیلی ها فکر کنند که انمیشن و حرکت در وب فقط توسط نرم افزار فلش انجام میشه و بسیاری از مشتری ها فکر میکنند که تحرک و انیمیشن به سایت آنها جلوه بصری جالبی میده و باعث میشه کاربران بیشتری رو به خودشون جذب کنند. اما از نظر طراحان وب سایت (البته اگر بخواهیم که به مشتری مشاوره درستی بدیم) استفاده از فلش در وب سایتهایی که جنبه کسب و کار داره و وجود وب سایت و دردسترس بودن آن حساس و مهم میباشد استفاده از فلش امری درست نیست. خوشبختانه با رواج استفاده از تکنولوژی jQuery بسیاری از این گونه مسائل مانند Image Galley و. . . حل شده و بدون استفاده از فلش میشود حرکت هم داشت. البته من منکر فلش و توانایی های بالای آن نمیشوم اما از هر ابزاری باید به موقع و در مکان صحیح آن استفاده نمود.
در خودآموز امروز قصد دارم نحوه ساخت پس زمینه متحرک برای وب سایت با استفاده از کتابخانه jQuery رو توضیح بدم. د ر این مثال همانطوری که در دموی آنلاین آن میتوانید مشاهده کنید بصورت بسیار ساده از عکسهای ابری استفاده شده است که جلوه حرکتی به سایت میدهد.
نکته اول این است که شما باید از عکس چندین برابر (Width) که در حالت عادی استفاده میکردید استفاده کنید. در مثال ما از عکس در ابعاد ۲۲۴۷*۱۹۰ استفاده کردیم. میتوانید این عکس را از اینجا دانلود نمایید. اما شما میتوانید هر عکسی را که میخواهد انتخاب و استفاده نمایید.
یک فایل با نام Index.html بسازید. اگر با نرم افزاری مانند Dream Weaver این کار را انجام میدهید کدهای اولیه را اتوماتیک وار در صفحه شما میاندازد اما اگر از ادیتوری مانند NotePad استفاده میکنید کدهای زیر را بصورت دستی وارد نمایید :
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-type” content=“text/html; charset=utf-8″ />
<title>Animated background Image</title>
</head>
<body>
</body>
</html>
اکننون بخشهای مختلف این مثال را تشکیل میدهیم :
<div id=“container”>
<div id=“header”>
<h1>Animated Background Image</h1>
</div><!– #header –>
<div id=“content”>
<!– Your content will go here –>
</div><!– #content –>
</div><!– #container –>
خوب تا اینجای کار صفحه XHTML خود را ساخته ایم و باید کمی به آن شکل دهی و Style دهی کنیم. در این مثال استثنائا به دلیلد کوچک بودن آن کدهای CSS را در داخل فایل index.html مینویسم اما همیشه به یاد داشته باشید که css های خود را در فایل جداگانه ای (مانند style.css) بنویسید :
<style type="text/css" media="screen">
body{
background-color: #C0DEED;
margin:0;
padding:0;
}
#header{
height:180px;
background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
text-align:center;
margin-top:-30px;
}
#header h1{
padding-top:35px;
font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
color:white;
font-size:45px;
}
#content{
background-color:#fff;
height:500px;
width:980px;
margin:25px auto 0 auto;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
</style>تا اینجای کار را ذخیره نمایید و بر روی مرورگر خود آنرا اجرا نمایید. اگر همه چیز درست باشد شما باید دقیقا مشابه فایل دمو و البته بدون پس زمینه متحرک یعنی پس زمینه ثابت داشته باشید.
اکنون وقت آن رسیده است که به پس زمینه خود فرمان حرکت را بدهیم و همانگونه که انتظارش را داشتید این کار توسط jQuery انجام میشود . در این مثال ما کمتابخانه jQuery را از روی سرور گوگل فراخوانی میکنیم و نیازی به داشتن آن بر روی کامپیوتر شخصی و یا هاست نداریم. کافیست توسط این یک خط کد این فراخوانی را انجام دهید. این خط را بعد از اتمام تگ Body انجام دهید :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
البته اگر فکر کرده اید که با کپی کردن این یک خط پس زمینه شما به حرکت در خواهد آمد بسیار اشتباده کرده اید چرا فرمان دستور را شما باید در سطرهای پایینی این دستور و به این شکل بدهید :
<script type=“text/javascript” charset=“utf-8″>
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247;
var headerWidth = 800;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$(‘#header’).css(“background-position”,current+“px 0″);
}
var init = setInterval(“scrollBg()”, scrollSpeed);
</script>
خبر بد اینکه در این خودآموز اصلا به نحوه تفسیر این چند خط نمیپردازیم. البته کسانی که دانش برنامه نویسی دارند میتوانند متوجه بشوند که چه کردیم. اما خبر خوب اینکه به زودی پستهای آموزشی jQuery رو یکی از دوستان آماده خواهد کرد که اجازه بدید فعلا در بارش صحبتی زیادی نکنیم. فایل سورس حاوی صفحه index و عکس بکار گرفته شده در این خودآموز را میتوانید از اینجا دانلود نمایید.
منبع
پاسخ با نقل قول
