تغییر خودکار رنگ پس زمینه
آنچه می خوانید
در دیدگاه های وب سایت آقای مرتضی قربانی لطف کردند و نوشتن مطلبی در مورد تغییر خودکار رنگ پس زمینه رو به ما پیشنهاد کرده بودند ، که ما ازشون تشکر می کنیم و این مطلب رو برای استفاده قرار میدیم.
فراخوانی فایل های جی کوئری
ابتدا نیاز هستش تا ۳ تا فایل جی کوئری رو بین ۲ تا تگ <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 رو آموزش داده بودیم .
منبع
سلام تمام مطالبتون طوری تنظیم شده که فقط باید یکی بدونه کجا کدها وارد میشن
یکم فکر کنیم شاید کسی نمیدونه و بلد نیست
لطفا اگر میشه یکبارم که شده از صفر بگید کدها کجا چه شکلی وارد میشن مثلا نمونه برای همین تغییر رنگ
دوستان من همشون بلدن ولی من نمیدونم لطفا سایتتونو همگانی کنید نه فقط برای حرفه ای ها
سایت بسیار خوب وفوق العاده ای داری خیلی مطالب مورد نیازم رو از این طریق یاد گرفتم
هرجا هستی موفق وپیروز باشی
سلام
میگم دیگه با اومدن css3 دیگه نیازی به جاوا نوشتن نیست و با چندخط کد سی اس اس میتونیم به راحتی این خاصیتو ایجاد کنیم که بکگراند رنگش عوض بشه
مثل همیشه عالی
با سلام
میهش راهنمایی کنید چطور تو وبلاگ استفاده کنم ؟
هرکاری کردم نشد ! :)
بسیار عالی بود
ممنون بابت وب سایت فوق العادتون , بهترینید :)
دستتون درد نکنه
من هرچیزی از سایتون دانلود کردم ، فایلش مشکل داشت
سلام
چرا فارسی تایپ میشه داخلش با اینکه meta charset=”utf-8″>
هست کلمات فارس بصورت ؟؟؟؟؟؟؟ نشان داده میشه؟
اینو قرار بدید
نباید مشکلی باشه .
اینم جالب بود.
مرسی
سلام
ممنون از مدیر سایت
سایت خوبی دارید.
موفق باشید.
سلام
ممنون خیلی وقت بود دنبالش بودم…
ممنونم . جالبه
ازتون ممنونم !