מדריך: כך תגרמו גם לאתר שלכם לעשות את ההארלם שייק

מדריך קצר עמוס בקוד שיאפשר לכם לגרום לדף האינטרנט שלכם לעשות את ההארלם שייק

הפוסט נכתב על ידי שי מסיסטרנו, מפתח ווב, בעברו מרצה במכללת Ness.

תמונה: flickr, cc-by, Marie. L.

תמונה: flickr, cc-by, Marie. L.

מטרת הניסוי

לנגן את ה”הארלם שייק” ולגרום לאלמנטים בדף לרקוד לפי הקצב שלו.

וככה זה נראה:

הציוד הדרוש

jQuerySWFObjectסרטון הארלם שייקכרום או פיירפוקס.

רקע

מה זה הארלם שייק? מגפת אינטרנט של אנשים שמצלמים את עצמם רוקדים לצלילי הרמיקס “הארלם שייק”.

מהו מהלך הריקוד?

  • אחרי 2 שניות: מתחילה המוזיקה – בשלב הזה רק איש אחד רוקד.
  • אחרי כ-15 שניות: המוזיקה נעצרת ושומעים את המשפט “Do the Harlem Shake”.
  • בשלב הזה כולם מצטרפים לריקוד.
  • אחרי כ-30 שניות: הריקוד נגמר.

מהלך הניסוי

ניצור דף HTML ונטען את SWFObject (לטעינת סרטון מיוטיוב) ואת jQuery.

Screen Shot 2013-03-07 at 2.44.26 PM

ניצור את הקובץ animations.css ונגדיר מספר אנימציות.

אנימציית סיבוב:

Screen Shot 2013-03-07 at 2.54.44 PM

 

אנימציית מצד לצד:

Screen Shot 2013-03-07 at 2.55.27 PM

 

אנימציית השענות:

Screen Shot 2013-03-07 at 2.56.27 PMאנימציית התרחבות:

 

Screen Shot 2013-03-07 at 2.58.26 PMאנימציית הטייה:

Screen Shot 2013-03-07 at 2.59.12 PM

 

ניצור את הקובץ harlem_shake.js.

ניצור אובייקט עבור האלמנט שרוקד לבד בתחילת השיר.

(האלמנט הזה הוא “sitetitle”, שבתוכו הכיתוב “Newsgeek” בראש הדף).

Screen Shot 2013-03-07 at 3.00.35 PM

ניצור מערך עבור האלמנטים שרוקדים ביחד אחרי השנייה ה-15.

Screen Shot 2013-03-07 at 3.01.40 PM

 

כל אחד מהאובייקטים שיצרנו, כולל את מזהה האלמנט (id) ואת שם האנימציה שהוא ינגן (class).
אתם יכולים להרקיד כל דף, אם רק תשנו את ה-IDs שלמעלה, לאלה שבדף שלכם.

ניצור את הפקודה שטוענת את נגן היוטיוב:

Screen Shot 2013-03-07 at 3.02.42 PM

ניצור את הפקודה ש”מקפיצה” את הדף למעלה (כדי שיהיה אפשר לראות את הלוגו, שהוא הראשון שרוקד):

Screen Shot 2013-03-07 at 3.03.44 PM

ניצור פונקציה שמחכה שהסרט יהיה מוכן וכשזה קורה, מנגנת אותו ו”מרקידה” את האלמנטים לפי הזמנים שהזכרתי מקודם:

Screen Shot 2013-03-07 at 3.05.12 PM

נחכה שהסרטון ייגמר (מצב 0 מסמל את עצירת הסרטון) ונפסיק את הריקוד:

Screen Shot 2013-03-07 at 3.06.21 PM

נרקיד את האלמנט הראשון:

Screen Shot 2013-03-07 at 3.08.05 PMנרקיד את האלמנטים הבאים:

Screen Shot 2013-03-07 at 3.08.43 PM

 

תוצאות הניסוי

הדליקו רמקולים וצפו בתוצאה (רק בדפדפנים כרום, ספארי ופיירפוקס)

הפוסט פורסם לראשונה בבלוג קוד נקי.

 

 

כתב אורח

אנחנו מארחים מפעם לפעם כותבים טכנולוגים אורחים, המפרסמים כתבות בתחומי התמחות שלהם. במידה ואתם מעוניינים לפרסם פוסט בשמכם, פנו אלינו באמצעות טופס יצירת קשר באתר.

הגב

6 תגובות על "מדריך: כך תגרמו גם לאתר שלכם לעשות את ההארלם שייק"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
פחחח
Guest

לא עובד!

Rafael Herscovici
Guest

אולי היה עדיף אם הייתם מחקים את YOUTUBE עד הסוף… ולא גורמים לעיניים שלי לצאת ממקומן.
ואם לא ידעתם, תכתבו DO THE HARLEM SHAKE בשורת החיפוש של YOUTUBE

nir
Guest

לא עובד כי אתם משתמשים בסקריפטים שנמצאים מחוץ לאתר שלכם (חובבני משהו) והאתר ההוא נפל

ירון
Guest

עבד חלקית.
ובכל זאת גדול :)

אקס שופ
Guest

עובד, עובד…
התגובות עדיין רוקדות לי פה.

משה
Guest

עובד מעולה, על IE10.

wpDiscuz

תגיות לכתבה: