יצירת יישומונים אנימציה לחלוטין עם Shift.css

אינטרנט אנימציה מציע דרך לתפוס את תשומת הלב של האנשים ו לצייר אותם עוד יותר לתוך אתר אינטרנט. יש הרבה כלים שם בחוץ ליצור אנימציות חינם - - אבל Shift.css הוא אחד החדשים בחבורה.

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

ה Shift דף הדגמה יכול להראות לך הרבה יותר טוב ממה שאני יכול להסביר במילים.

דבר אחד שתבחין הוא כי כל רכיב בתוך המיכל הוא אלמנט HTML נפרד. בין אם זה SVG או תמונה או מה שלא יהיה, אתה יכול הנפשת הכל בנפרד ליצור אפקט אנימציה משלך מותאם אישית - -.

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

אני לא יכול למצוא כל ריפו GitHub עבור הפרויקט הזה, אז תצטרך להוריד את הקבצים ישירות מהאתר Shift.css.

השלב הבא הוא להגדיר רכיב מכולה עם קצת תוכן. שמות מחלקה חשובים ולכן כל מרכיב animating צריך יש בכיתה .אלמנט המשמרת הוחל.

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

1. אנימציה נתונים: שם האנימציה
2. עיכוב נתונים: העיכוב הכולל (בשניות) לפני שההנפשה מתחילה
3. משך נתונים: אורך כולל (בשניות) של האנימציה

שם האנימציה צריך להיות אנימציה מוגדרת מראש נוצר עבור הספרייה Shift. עכשיו יש 15 שמות אנימציה לבחירה. תוכל לראות אותם בתחתית דף הבית של Shift.css.

רק העתק הדבק מה שתרצה לתוך ההגדרה שם האנימציה ואתה צריך להיות טוב ללכת! לדוגמה, אם אני רוצה להשתמש ביציאה דהייה היציאה הייתי מוסיף data-animation = "shift_exitFade" כמו תכונה נתונים אלמנט כלשהו צריך להנפיש ככה. קלי קלות.

אני רוצה ספריה זו באה עם יותר אפשרויות ב- JavaScript כי זה יאפשר למפתחים יש שליטה רבה יותר על המיקום ותכונות. אבל עבור מסגרת אנימציה פשוטה (ללא תשלום) אני לא יכול להתלונן.

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