כיצד לשחק אנימציה GIFs on

GIF מונפש היא דרך פופולרית לדמיין רעיון עיצוב (הנה דוגמה לאופן שבו עשינו את זה עבור פוסט טקסט אפקטים שנוצרו עם CSS) או להציג את קטע וידאו קצר. אבל אם יש לך יותר מדי מהם באותו דף, זה יהיה לסטות את המיקוד של המשתמש שלך. עבור דפים המציגים הרבה קבצי GIF, אלו הן חדשות רעות.

הפתרון: לשרת משתמשים עם תמונה סטטית רק לאפשר את GIF אנימציה לרוץ עם המשתמש לחץ. במדריך קצר זה אנחנו הולכים להראות לך איך לעשות בדיוק את זה.

• הצג הדגמה
• הורד מקור

מתחילים

התחל עם הכנת תיקיות הפרויקט וקבצים הכוללים: קובץ HTML, jQuery, ולבסוף קובץ JavaScript שבו נכתוב את הקוד שלנו. אתה יכול לקשר jQuery ל CDN או לתפוס את העותק ולקשר אותו לספריית הפרויקט שלך. הייתי משאיר את סגנונות CSS ל הדמיון שלך. החלק החשוב ביותר הוא סימון HTML הוא כדלקמן:

שימו לב לתוספת נתונים- alt תכונה ב img אלמנט. זה המקום שבו אנחנו לאחסן את GIF, במקום תמונה סטטית אשר אנו משרתים בתחילה. אתה יכול להוסיף תמונות נוספות וגם להוסיף כיתוב עבור כל דרך איור אלמנט.

לאחר מכן, נכתוב את JavaScript שיביא את הקסם. הרעיון הוא להציג את תמונת GIF כאשר המשתמש לוחץ על התמונה.

JavaScript

ראשית, אנו יוצרים פונקציה כי יהיה לאחזר את נתיב התמונה GIF שמנו את נתונים- alt תכונה. אנו לולאה דרך כל תמונה להשתמש jQuery .נתונים() שיטה לעשות זאת:

 var getGif = function () var gif = []; $ ('img') כל אחד (פונקציה () var data = $ (this) .data ('alt'); gif.push (נתונים);); לחזור gif;  var gif = getGif ();

אנו מפעילים את הפונקציה ושומרים את הפלט במשתנה gif, כאמור לעיל. ה gif המשתנה מכיל כעת את נתיב ה- GIF מהתמונות שבדף.

טעינת תמונה מקדימה

עכשיו יש לנו בעיה בטעינה: עם GIF עדיין לא נטען, יש סיכוי כי GIF אנימציה לא היה משחק באופן מיידי (מאז הדפדפן היה צריך כמה שניות כדי לטעון את GIF מלא). עיכוב זה יורגש בצורה משמעותית יותר כאשר גודל התמונה GIF גדול.

אנחנו צריכים לטעון מראש, או לטעון את GIFs בו זמנית כמו הדף נטען.

 // Preload כל GIF. var image = []; $ .each (gif, function (index) image [index] = תמונה חדשה (); תמונה [index] .src = gif [index];);

עכשיו, לפתוח את DevTools ואז הראש אל רשת (או משאבים). תוכלו להבחין כי GIFs כבר טעון למרות שהם נשמרים ב נתונים- alt תכונה. והנה את כל הקוד שאתה צריך לעשות זאת.

החלק האחרון של הקוד הוא המקום שבו אנחנו נקשר כל אחד דמות רכיב זה עוטף את התמונה עם לחץ על אירוע.

הקוד יחליף את מקור התמונה בין src תכונה שבה התמונה הסטטית מוגשת נתונים- alt תכונה שבה אנו משרתים לראשונה את תמונת GIF.

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

 $ ('דמות') ב- ('click', function () var $ this = $ (this), $ index = $ this.index (), $ img = $ this.children ('img'), $ imgSrc = $ img.attr ('src'), $ imgAlt = $ img.attr ('data-alt'), $ imgExt = $ imgAlt.split ('.'), אם ($ imgExt [1] === '$' img.attr ('src', $ img.data ('alt')). attr ('data-alt', $ imgSrc); אחר $ img.attr ('src', $ imgAlt) .attr ('data-alt', $ img.data ('alt'));;

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

בדוק את ההדגמה והורד את המקור כאן.

• הצג הדגמה
• הורד מקור