در دیدگاه های وب سایت آقای مرتضی قربانی لطف کردند و نوشتن مطلبی در مورد تغییر خودکار رنگ پس زمینه رو به ما پیشنهاد کرده بودند ، که ما ازشون تشکر می کنیم و این مطلب رو برای استفاده قرار میدیم.

تغییر خودکار رنگ پس زمینه

فراخوانی فایل های جی کوئری

ابتدا نیاز هستش تا ۳ تا فایل جی کوئری رو بین ۲ تا تگ <head/> و <head>  فراخوانی کنید ، البته فرقی هم نداره ، می تونید تو تگ <body> هم ازش استفاده کنید .


<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/animated_bg.js"></script>

نکته خیلی مهم این که اون ۲ تا فایل اولی معمولا داخل قالب ها فراخوانی شده هستند ، که نیاز به تکرار نیست و تست کنید اگر مشکلی نبود فقط همون سومی رو قرار بدید ، چون که ۲ تای اول حجم زیادی هم دارند و یکبار داخل قالب معمولا ازش استفاده شده . و بازم دقت کنید آدرس جایی رو که فایل ها رو آپلود می کنید رو به جای آدرس های بالا قرار بدید .

تعیین رنگ های پس زمینه دلخواه

برای اضافه کردن پس زمینه های اضافی به شکل زیر عمل می کنیم .


<script>
jQuery(document).ready(function(){
$('.animated_bg2').animatedBG({
colorSet: ['#abebfe', '#aad667', '#57e6ee', '#ff7ebb'],
speed: 2000
});
$('.animated_bg3').animatedBG({
colorSet: ['#71a98b', '#b15c8e', '#dc6b68', '#6c5a94', '#b14c4e', '#736357'],
speed: 6000
});
});
</script>

کدهای بالا رو می تونید هر کجای تگ <head> یا <body> قرار بدید . اگر دقت کرده باشید اومده ۲ تا حالت جدید animated_bg2 و animated_bg3 رو با رنگ های مختلف تعریف کرده . سرعت اولی رو روی ۲۰۰۰ گذاشته و دومی هم روی ۶۰۰۰ . شما مثل همین کپی کنید با شماره های جدید تر و هر چندتا دیگه که دوست داشتید اضافه کنید با رنگ بندی و سرعت دلخواه خودتون . اون کدهای رنگ ها هم که می بینید رنگ پس زمینه به ترتیب تغییر می کنند و کم کم جای هم میاند .

استایل پس زمینه ها

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


/* set bg color same as the first color defined in the animation function */
.animated_bg {
 background: #ef008c;
 color: #fff;
}
.animated_bg2 {
 background: #abebfe;
 color: #000;
}
.animated_bg3 {
 background: #71a98b;
 color: #fff;
}

برای مثال برای animated_bg2 رنگ شروع کننده در اون کدهای بالایی و بک گراند استایل در همین کد بالا هر دو روی abebfe# تنظیم شده است .

کدهای html تغییر خودکار رنگ پس زمینه

خوب این همه کار کردیم ، در آخر باید از کدهای html برای نمایش استفاده کنیم . به ظور واضح ۳ تا مثال آورده شده .


<p><a href="#" class="animated_bg button">Learn More</a></p>

<div class="animated_bg2 box">
<h2>.animated_bg2</h2>
</div>

<div class="animated_bg3 box">
<h2>.animated_bg3</h2>
</div>

دمو و دانلود فایل تغییر خودکار رنگ پس زمینه

مشاهده دمو

لینک دانلود

همچنین در مطالب قبلی سایت آموزش رنگ بندی تصادفی استایل قالب با php رو آموزش داده بودیم .

منبع

امتیاز شما از 1 تا 5
1 ستاره میدم به نوشته2 ستاره میدم به نوشته3 ستاره میدم به نوشته4 ستاره میدم به نوشته5 ستاره میدم به نوشته 3 رای
Loading...