15
בנובמבר
2009

קשת בענן: אנימציית שינוי צבע טקסט וצבע הרקע בעזרת javascript

מאת: מאור ברזני | תגובות: 0 | נושאים: אינטרנט,טכנולוגיה
תגיות: , , |

הסקריפט הזה הוא תוספת לפונקציה בספריית jQuery, שמאפשרת לעשות שינוי לצבע הרקע או הטקסט. במצב הרגיל, אפשר להגדיר ב-CSS את צבע האלמנט (צבע הטקסט או צבע הרקע)  ובפונקציה עצמה את צבע היעד, והיה מתקבל שינוי צבע דימני.

התוספת הזאת לפונקציה, מאפשרת תחלופה ושינוי רנדומלי של צבע הטקסט או הרקע באופן מתמשך.

מה נלמד בפוסט הזה?

  • איך לייצר צבע אקראי בפורמט RGB
  • תהליך יצירת האנימציה לשינוי הצבע בעזרת הפלאגין jQuery Color Animations.
  • שימושים שונים לפונקציה.

מחולל צבע אקראי

הצעד הראשון הוא להכין מחולל שיתן לנו אספקה מתמשכת של ערכי צבעים לשינוי בעזרת שימוש בשורה אחת של javascript. השורה הבאה תייצר משתנה בשם hue, שמכיל צבע בפורמט RGB, צבע זה ישמש לאנימציה בהמשך.

1
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';

החלפה ושינוי בין הצבעים השונים

הורידו את הפלאגין jQuery Color Animations – הוא ישמש כמעביר בין הצבעים השונים שנחולל באופן אקראי.

יש לבחור את האלמנט ב-CSS שאותו נרצה לשנות ולתת לו צבע רקע או צבע טקסט ראשוני. בדוגמה כאן האנימציה תפעל על צבע הרקע של אלמנט עם המזהה  #div. ניתן כמובן לשנות בהתאם לצרכים.

1
$('#div').animate( { backgroundColor: hue }, 1000);

הקוד המלא

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
spectrum();

function spectrum(){
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#div').animate( { backgroundColor: hue }, 1000);

spectrum();

}

});

רצוי לשמור את הקוד הזה כקובץ נפרד, בשם למשל colorize.js ולהוסיף בתוך ה-header של המסמך קריאה לפונקציה ביחד עם הקריאה לפלאגין שהורדנו. באופן הזה:

1
<script src="jquery.color.js" type="text/javascript"></script> <script src="colorize.js"></script>

שימושים אפשריים

שינוי צבע הרקע - נניח שנרצה לשנות את צבע הרקע של אלמנט ה-body. במקרה הזה נשנה את שורה מספר 6 בפונקציה colorize.js  שיצרנו, ונשתול שם את השורה הזו במקום:

1
$('body').animate( { backgroundColor: hue }, 2000);

שינוי צבע הטקסט – אם נרצה לשנות את צבע הטקסט של אלמנט כלשהו שיש לו את הקלאס colored, נשתול במקום שורה 6, את השורה הזו:

1
$('.colored').animate( { color: hue }, 1000);

וכך הלאה, לפי מה שנרצה.

שינוי מהירות חילוף הצבע

המספר שמופיע בסוף השורה (2000, 1000 וכו') הוא מספר המילי שניות שיעברו בין החלפה והחלפה. לכן ככל שהמספר יהיה גבוה יותר, כך מהירות חילוף בין צבעים תהיה איטית יותר.

נסו ותהנו.

* הערה: זהו פלאגין של jQuery עם תוספת של שורות javascript. יישומם אינו מוגבל לוורדפרס וניתן לשתול את הסקריפט בכל אתר אינטרנט.

Gravity Forms Plugin for WordPress
שתפו גם אחרים:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • LinkedIn
  • Google Bookmarks
  • Live
  • PDF
  • MySpace
  • del.icio.us
  • Digg
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

אין תגובות »

פיד RSS לתגובות בפוסט | טראקבק


הוסף תגובה

You can add images to your comment by clicking here.

TechnoCraft - פתרונות אינטרנט


אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס - וורדפרס, תוכן, טכנולוגיה ועוד כמה דברים - מופעל באמצעות WordPress | פתרונות אינטרנט