همیشه داشتن یک BackGround حرفه ای و مناسب , یکی از دغدغه های هر وب مستر میباشد .
حتما شما هم از پشت ضمینه های ایستا و یک نواخت خسته شده اید …
در این پست به انتشار مطلب در مورد داشتن یک پشت ضمینه متحرک خواهم پرداخت تا با استفاده از آن بتوانید کاربران خود را مجذوب سایت خود سازید .
و اما آموزش :
۱ – ابتدا در Css سایت خود به سراغ انتخابگر body رفته و هر چه خاصیت background در آن هست را پاک نموده و خصوصیات ریر را جایگزین کنید . ( یعنی به قسمت { } body اضافه شود )
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
background-image:url(images/cloud-vms.png);
background-color:#369;
-webkit-animation:vahid 60s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-moz-animation:vahid 60s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-o-animation:vahid 60s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
-ms-animation:vahid 60s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
animation:vahid 60s;
animation-iteration-count:infinite;
animation-timing-function:linear;
background-repeat:repeat-x;
background-attachment:fixed;
|
2 – در همین فایل Css که قرار دارید , در زیر انتخاب گر body و پس از بسته شدن آن , خاصیت های زیر را وارد نمایید .
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
|
@-webkit-keyframes vahid{
۱۰۰%{background-position:-1366px 0}
}
@-moz-keyframes vahid{
۱۰۰%{background-position:-1366px 0}
}
@-o-keyframes vahid{
۱۰۰%{background-position:-1366px 0}
}
@-ms-keyframes vahid{
۱۰۰%{background-position:-1366px 0}
}
@keyframes vahid{
۱۰۰%{background-position:-1366px 0}
}
|
3 – حال در روت ( root ) سایت خود پوشه ای به نام images بسازید و عکسی که در خط بعدی برایتان قرار داده ام را آپلود نمایید . ( بدیهی است اگر پوشه images از قبل وجود دارد , دیگر نیازی به ساختن نیست و فقط عکس را در آن آپلود نمایید )
دانلود عکس مربوطه ( بر روی لینک کلیک راست و گزینه ی save را بزنید )
نکات بسیار مهم :
۱ – اگر میخواهید سرعت ابر ها را تند تر و یا کند تر کنید , باید هر ۵ تا ۶۰s رو تغییر دهید . مثلا برای کندتر کردن , همه را روی ۱۰۰s بگذارید .
۲ – در قسمت اول و در خاصیت Background-color , میتوانید هر رنگی را که دوست دارید قرار دهید تا آسمان به همان رنگ درآید . مثلا اگر میخواهید آسمانی در شب داشته باشید , رنگ خاکستری تیره استفاده کنید .
یعنی :
3 – اگر از عکس ابر خوشتان نیامد و میخواستید عکس را عوض کنید , به راحتی میتوانید در خط اول , آدرس عکس را عوض و آدرس عکس خود را بدهید .
مثلا :
|
|
background-image:url(آدرس عکس مربوطه);
|
اما باید یک تغییر دیگر هم بدهید . باید پهنا ( width ) عکس انتخابی خود را جایگزین عدد ۱۳۶۶ بالا کنید .
۴ – اگر میخواید عکس شما از راست به چپ حرکت کند , باید عددی منفی ( – ) بگذارید و اگر میخواهید از چپ به راست حرکت کند , عددی مثبت ( + ) قرار دهید .
دموی آماده آموزش