אַשׁרַאי:
זה ה-4 ביולי, ולאלו מכם בארה"ב, אתם יודעים מה זה אומר - זה הזמן לשתות בירה, לזרוק סטייק על המנגל ולפוצץ דברים. למה לא להיכנס לרוח הדברים עם קצת טוב נפיץ ישירות באתר או בבלוג שלך?
במאמר זה, ניצור אפקט זיקוקים פשוט באמצעותjQueryשניתן להחיל על כל רכיב בדף האינטרנט שלך. השתמש בו כדי להוסיף זיקוקים לתמונות, רקעים, או לכל מקום אחר שמתחשק לך לפוצץ כמה פיקסלים. התוצאה בסיסית למדי, אבל היא עדיין די מגניבה והיא תספק לך פריימר טוב על אנימציית JavaScript.
הגדרת הדף
מלכתחילה, נצטרך מעט סימון, בעיקר למטרות הדגמה.
זה די פשוט. אנחנו רק מגדירים קצת HTML בסיסי, ותופסים את jQuery מה-CDN של גוגל. אנחנו גם קוראים ל-fireworks.css ו-fireworks.js, אותם ניצור תוך רגע. jQuery היא מסגרת JavaScript המועדפת עליי, אז זה מה שאשתמש בו כדי ליצור את הזיקוקים. זה לוקח הרבה עבודה מהנפשת הפיצוצים שלנו.
ברגע שהסימון לא יהיה מהדרך, נוכל לעבור ל-CSS שלנו. שוב, זה די פשוט. אנחנו רק צריכים להגדיר כמה אלמנטים, כלומר המיכל שיכיל את הזיקוקים ('#תמונה' במקרה זה), ו-div קטן שנוכל להשתמש בו כחלקיק הבסיס שלנו, שבו נשתמש במקום תמונה , כך שנוכל לשנות בקלות את הצבע.
נתחיל עם המיכל. תפסתי תמונה יפה של אגם בלילה מבּוּרסָהומתכננים להשתמש בזה כרקע שלי.
רוב ה-CSS שלמעלה מיועד פשוט להגדרת הגובה, הרוחב והמיקום של התמונה בעמוד, אבל יש כמה דברים לשים לב. הגדרנו את הגלישה ל'מוסתר' כדי שהזיקוקים שלנו לא יירו מהתמונה, והוספנו מיקום:יחסי, כי אנחנו נמקם לחלוטין את רכיבי החלקיקים שלנו בתוך התמונה. כפי שאתה יכול לראות, אין תג תמונה ב-HTML עבור התמונה. הוא משמש כרקע div, במקום זאת. כך אנחנו לא צריכים לדאוג בקשר לזה בעת מניפולציה של התוכן של div התמונות שלנו.
לאחר מכן, עלינו להגדיר את ה-CSS עבור חלקיק הבסיס שלנו. כל שעלינו לעשות הוא לציין גובה, רוחב, ולומר לדפדפן להשתמש במיקום מוחלט. אני משתמש בחלקיק של 3 פיקסלים על 3 פיקסלים, אבל אם אתה משתמש בתמונה גדולה יותר או קטנה יותר, אולי תרצה להתאים את גודל החלקיקים.
עכשיו אמור להיות לך משהו שנראה ככה. הוספתי גם קצת CSS לגוף העמוד, אבל אין לזה שום קשר לזיקוקים.
אַשׁרַאי:
יצירת האנימציה
כשאלה אינם מהדרך, אנחנו מוכנים לעבור לבשר ותפוחי האדמה של הפרויקט - ה-JavaScript.
עם זאת, לפני שנוכל להתחיל לכתוב את פונקציית הפיצוץ שלנו, נצטרך שיטה מהירה לשכפול החלקיקים שלנו. תמיד נוכל להשתמש בשיטת השיבוט המובנית של jQuery, אבל מכיוון שניצור הרבה עותקים, בוא נלך עם משהו קצת יותר יעיל.
מכיוון שאני מעריץ גדול של לא להמציא מחדש את הגלגל, אני פשוט אשתמש בתוסף קטן ושימושי שמצאתי ב-דקת jQueryשמרחיב את jQuery עם פונקציית .duplicate().
למאמר המקושר למעלה יש הסבר טוב כיצד פועל הפלאגין, אז אני לא ארחיב. לעת עתה, כל מה שמעניין אותנו הוא שנוכל לקרוא לזה על אלמנט החלקיקים שלנו על ידי שימוש ב-.duplicate(50) למשל, שייתן לנו 50 עותקים לרשותנו.
בסדר, עכשיו בואו באמת ניגש לעניינים ונכתוב את פונקציית הפיצוץ שלנו. עם זאת, לפני שנתחיל לבנות אנימציות וליצור אלמנטים, עלינו להגדיר כמה משתנים שיוגדרו בכל פעם שהפונקציה נקראת.
בואו נעבור על זה שלב אחר שלב ונסתכל למה מיועדים כל אחד מהמשתנים הללו.
שָׁמַיִם- זהו אובייקט jQuery עבור האלמנט שיכיל את הזיקוקים שלנו, שנבנה על ידי העברת מזהה האלמנט בזמן ריצה, כמו למשל: explosion('photo').
צבעים- מערך פשוט של כמה צבעים בהירים לשימוש עבור הזיקוקים שלנו. אנחנו ניצור זיקוקים בצבע אחד, ורב-צבעים.
פולט- אנו יוצרים אובייקט div פשוט ונותנים לו את מחלקת החלקיקים. זה יהיה הבסיס או המרכז של הפיצוץ שלנו.
סַסגוֹנִיוּת- מספר אקראי מ-0-10 המשמש מאוחר יותר כדי לקבוע אם להפוך את הזיקוקים לרב צבעים או לא.
כעת, לאחר שיצרנו את אובייקט הפולט שלנו, עלינו להוסיף לו כמה מאפייני CSS נוספים. עדיף לעשות זאת לפני שמצרפים אותו ל-DOM, אז בוא נעשה את זה.
לאחר סגנון הפולט, נוכל לצרף אותו למיכל שלנו. בזמן שאנחנו בזה, בואו נמשיך ונעשה גם את הכפילויות האלה.
וואו! תחזיק מעמד. מה הקטע עם כל המתמטיקה? אל תדאג. אנחנו רק יוצרים מספרים אקראיים*. משמעות הדבר היא שכאשר הזיקוקים שלנו יופעלו, הם יוצבו באופן אקראי על התמונה.
במקרה זה, הרוחב הוא מספר אקראי בין 3 לרוחב התמונה שלנו (400), והגובה הוא מספר אקראי בין 3 ל-100, מכיוון שאנו רוצים שרק יופיעו זיקוקים ב-100 פיקסלים העליונים של התמונה (ה שָׁמַיִם). למה 3? אין סיבה מיוחדת בכלל, מלבד זה שרציתי להבטיח שהפיצוץ תמיד מרוכז קצת בקצה התמונה.
לבסוף, נקבל את צבע הרקע על ידי משיכת צבע אקראי מהמערך.
* כדי ליצור מספר אקראי בטווח, קח את ההפרש של הערך המקסימלי פחות אחד מהערך המינימלי, הכפל את זה בערך מ-random(), שיהיה בין 0 ל-1. לאחר מכן הכפל אותו בערך המקסימלי . לבסוף, עטפו את כל זה בפונקציה floor() כדי להמיר את התוצאה למספר שלם.
גָדוֹל! כעת יש לנו 51 חלקיקים יושבים על הבד שלנו בקואורדינטות x,y שקבענו באקראי למעלה. כל מה שאנחנו צריכים לעשות עכשיו זה לתת להם אנימציה קטנה ואולי שכבת צבע חדשה.
כדי לעשות זאת, זה אומר שעלינו לעבור דרכם בלולאה. בגלל זה, אני באמת לא ממליץ לייצר יותר מ-50 חלקיקים או משהו כזה, כי זה יכול להיות קצת עתיר משאבים במכונות ישנות יותר.
הפונקציה .each() של jQuery מאפשרת לנו לעבור דרך מערך האלמנטים, ולבצע את הקוד שבפנים בכל אחד מהם.
אתה תבחין כאן שאנחנו מגדירים היסט x ו-ay offset. אלה קובעים לאיזה כיוון החלקיק הולך לנוע, ובכמה. באמצעות אותה נוסחה כמו לעיל, הקיזוזים אלו יהיו מספרים אקראיים בטווח של -10 עד 10 (עבור למעלה/למטה ושמאל/ימינה, בהתאמה).
זוכרים כשיצרנו מספר אקראי למעלה עבור המשתנה רב הצבעים שלנו? עכשיו בואו נשתמש בו ונראה אם אנחנו צריכים ליצור פיצוץ רב צבעים על ידי שינוי צבע החלקיק הנוכחי. אני רוצה זיקוקים צבעוניים קצת פחות מחצי מהזמן, אז בחרתי להשתמש ב-5 כנקודת הניתוק שלי. אתה יכול לשנות את זה איך שאתה רוצה.
זה אמור להיות די מובן מאליו בשלב זה. אם הערך של ריבוי צבעים גדול מ-5, שנה את הרקע של החלקיק על ידי משיכה של צבע אקראי אחר ממערך הצבעים.
עכשיו בואו נשים את החלקיקים האלה בתנועה. אנחנו הולכים להגדיר רצף אנימציה, המבוסס על הקיזוז x ו-y שקבענו לעיל. כדי לקבל את האורך הכולל של כל אנימציית חלקיקים, נכפיל את ההיסטים הללו ב-10. זה נותן לנו פיזור יפה בין -100x, -100y ו-100x, 100y, מנקודת המרכז, כלומר לפיצוץ שלנו יהיה קוטר מקסימלי של 200 פיקסלים. בהתאם לגודל התמונה שלך, ייתכן שתרצה להגדיל את התמונה או להקטין אותה (רמז: אם אתה מגדיל אותה, השתמש בחלקיקים גדולים יותר לקבלת אפקט טוב יותר).
כפי שאתה יכול לראות, אנחנו גם מגדירים את מהירות האנימציה ל-2.5 שניות (2500 אלפיות שניות), מה שנותן לנו התרחבות חלקה ואחידה של חלקיקים החוצה מנקודת המרכז שלנו.
כל שעלינו לעשות כעת הוא לברר מה לעשות עם החלקיקים ברגע שהם הגיעו לסוף רצף האנימציה שלהם. ובכן, מה עושים זיקוקים אחרי שהם מסיימים את הזיקוקים? הם נופלים מעט ומתפוגגים, אז אנחנו נגרום לחלקיקים שלנו לעשות בדיוק את זה.
האנימציה שלעיל, המבוצעת לאחר סיום הנפשת ההרחבה, מורידה את החלקיק ב-20px ובו-זמנית דוהה אותו ל-10% אטימות. אנו משתמשים ב"איטי" שנקבע מראש, כך שהחלקיקים נראה "תלויים" מעט באטמוספירה.
זהו! כעת אתה יכול לקרוא לפונקציה explode() כדי להצית זיקוקי דינור על התמונה שלך, או להפעיל אותו באופן ידני, או להתקשר אליו באופן אוטומטי כאשר הדף נטען. בדוגמה, אני קורא לזה כל 3 שניות דרך setInterval.
למרבה הצער, אנחנו לא יכולים להפעיל את האנימציה כאן, אבל אתה יכול לראות הדגמת וידאו למטה:
אני מקווה שנהנית מההדרכה. אתה יכול לצפות בדוגמה חיה של הזיקוקיםכָּאן, אוללכת ישר למקור.
משאבי פיתוח ועיצוב נוספים מבית Mashable:
-10 המשאבים המובילים להשראה עיצובית
-כיצד: להתעדכן ב-WordPress 3.0
ניוזלטרים אלה עשויים להכיל פרסומות, עסקאות או קישורי שותפים. בלחיצה על הירשם, אתה מאשר שאתה בן 16+ ומסכים לנותנאי שימושומדיניות פרטיות.
