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

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

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

ابتدا نیاز هستش تا 3 تا فایل جی کوئری رو بین 2 تا تگ <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>

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

پیشنهاد بعدی  قالب آدرنالین ووکامرس وردپرس Adrenalin

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

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


<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> قرار بدید . اگر دقت کرده باشید اومده 2 تا حالت جدید animated_bg2 و animated_bg3 رو با رنگ های مختلف تعریف کرده . سرعت اولی رو روی 2000 گذاشته و دومی هم روی 6000 . شما مثل همین کپی کنید با شماره های جدید تر و هر چندتا دیگه که دوست داشتید اضافه کنید با رنگ بندی و سرعت دلخواه خودتون . اون کدهای رنگ ها هم که می بینید رنگ پس زمینه به ترتیب تغییر می کنند و کم کم جای هم میاند .

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

اون قسمت مهم استایل رو برای مثال در پایین آوردیم . نکته این جاست که مثل کدهای زیر باید باید 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 برای نمایش استفاده کنیم . به ظور واضح 3 تا مثال آورده شده .


<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 ستاره میدم به نوشته 4 رای
Loading...