אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס

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

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

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

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

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

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

[ccwn_js]var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';[/ccwn_js]

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

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

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

[ccwn_js]$('#div').animate( { backgroundColor: hue }, 1000);[/ccwn_js]

הקוד המלא

[ccwn_js]$(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();

}

});[/ccwn_js]

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

[ccwn_js] [/ccwn_js]

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

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

[ccwn_js]$('body').animate( { backgroundColor: hue }, 2000);[/ccwn_js]

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

[ccwn_js]$('.colored').animate( { color: hue }, 1000);[/ccwn_js]

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

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

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

נסו ותהנו.

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

פוסטים טובים נכתבים עם כוס קפה. הפוסט הזה סייע לך? פתר לך בעיה? אפשר להזמין אותי לכוס קפה ומאפה דרך הפייפאל ולהביע תמיכתך בתוכנה חופשית (אין חובה שיהיה לך חשבון פייפאל בשביל זה…)