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

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

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

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

ابتدا نیاز هستش تا ۳ تا فایل جی کوئری رو بین ۲ تا تگ <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 رو آموزش داده بودیم .

منبع

امتیاز شما برای این مقاله
15 نظرات
  1. علی می گوید

    سلام تمام مطالبتون طوری تنظیم شده که فقط باید یکی بدونه کجا کدها وارد میشن
    یکم فکر کنیم شاید کسی نمیدونه و بلد نیست
    لطفا اگر میشه یکبارم که شده از صفر بگید کدها کجا چه شکلی وارد میشن مثلا نمونه برای همین تغییر رنگ
    دوستان من همشون بلدن ولی من نمیدونم لطفا سایتتونو همگانی کنید نه فقط برای حرفه ای ها

  2. مصطفی می گوید

    سایت بسیار خوب وفوق العاده ای داری خیلی مطالب مورد نیازم رو از این طریق یاد گرفتم

    هرجا هستی موفق وپیروز باشی

  3. عرفان می گوید

    سلام
    میگم دیگه با اومدن css3 دیگه نیازی به جاوا نوشتن نیست و با چندخط کد سی اس اس میتونیم به راحتی این خاصیتو ایجاد کنیم که بکگراند رنگش عوض بشه

  4. alireza می گوید

    مثل همیشه عالی

  5. نوگل باغ می گوید

    با سلام

    میهش راهنمایی کنید چطور تو وبلاگ استفاده کنم ؟
    هرکاری کردم نشد ! :)

  6. سفارش سئو و بهینه سازی وردپرس می گوید

    بسیار عالی بود

    ممنون بابت وب سایت فوق العادتون , بهترینید :)

  7. فاطمه قنبری می گوید

    دستتون درد نکنه

  8. sAjjAd می گوید

    من هرچیزی از سایتون دانلود کردم ، فایلش مشکل داشت

  9. siavash می گوید

    سلام
    چرا فارسی تایپ میشه داخلش با اینکه meta charset=”utf-8″>
    هست کلمات فارس بصورت ؟؟؟؟؟؟؟ نشان داده میشه؟

    1. آرش حیدری می گوید

      اینو قرار بدید

      &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt;
      

      نباید مشکلی باشه .

  10. پیام می گوید

    اینم جالب بود.
    مرسی

  11. آیفون کوماکس می گوید

    سلام
    ممنون از مدیر سایت
    سایت خوبی دارید.
    موفق باشید.

  12. هادی می گوید

    سلام

    ممنون خیلی وقت بود دنبالش بودم…

  13. پریا می گوید

    ممنونم . جالبه

  14. morteza می گوید

    ازتون ممنونم !

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.