תגית: אנימציה

אנימציות הן דרך פשוטה ויעילה להוסיף קצת הנאה לממשקי משתמש. החבר'ה ב-W3C הבינו את זה, והחל מ-CSS3 קיימים שני מאפיינים פשוטים לשימוש המאפשרים ליצור אנימציות: transition ו-animation. שתי התכונות האלו, וגם כל אחת בנפרד, הן אבני הבניין לבניית מגוון אנימציות המוגבל בעיקר ע"י הדמיון.

הנה דוגמה פשוטה מאוד (העבירו את העכבר על הריבוע האדום):

JS Bin on jsbin.com

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

Hover.css

אמנם גיליתי אותה רק לאחרונה, אך Hover.css הפכה מיד לאחת מספריות האנימציות המועדפות עליי. היא מכילה כמה עשרות אנימציות שכולן מיועדות למצב hover – כלומר תרחיש בו העכבר נוגע באלמנט. האובייקטים הנפוצים למצב hover הם קישורים, כפתורים, תפריטים וכד'.

האנימציות ב-Hover.css מחולקות לקטגוריות לפי סוג האנימציה (אנימציות על border, על הרקע, וכד') וחלקן מתאימות, לאחר שינויים קלים בקוד, גם לשימוש במצבים אחרים כמו למשל כניסה ויציאה של אלמנט.

Animate.css

אחת הספריות הותיקות יותר היא Animate.css המציעה כמה עשרות אנימציות המיועדות בעיקר לכניסה ויציאה של אלמטים מהמסך. Animate.css כוללת קבוצת אנימציות מגניבות בשם Attention Seekers (מושכי תשומת לב), המכילה אנימציות מגניבות כמו RubberBand (גומייה), שיתנו לאלמטים שלכם תחושה מציאותית וקלילה.

 

Animatable

ספריית Animatable היא למעשה הדגמה של אוסף כל תכונות ה-CSS התומכות באנימציה. נכון לכתיבת שורות אלו, הספרייה מציגה 39 אנימציות, שכל אחת מהן מוגדרת על מאפיין CSS אחר – שימושי מאוד כדי לקבל רעיונות חדשים לאנימציות או לדרכים בהן ניתן לממש אנימציה מסויימת.

טיפ קטן – לחצו על הכפתור "Animate all".

SpinKit

כשהגיחה אל חיינו טכנולוגית AJAX בתחילת שנות האלפיים, כולנו למדנו להכיר את אנימציות טעינת הדף – הספינרים (spinners). הכוכבים המסתובבים האלו אמנם החלו את דרכם כתמונות gif פשוטות, אך היום קיימים ספינרים מורכבים מאוד הממומשים באמצעות אנימציות CSS, ולעתים בעזרת עשרות או מאות שורות קוד. האתר SpinKit הוא אוסף מדהים ושימושי של אנימציות טעינה שונות ומגוונות, חלקן כל כך יפות שפשוט יש חשק לגרום לדפים להיטען לאט יותר 🙂

Effeckt.css

לא, זוהי לא שגיאת כתיב. ספריית Effeckt.css אוספת אנימציות CSS המיועדות לתרחישים ספציפיים ונפוצים כמו: כפתור submit, הוספה לרשימה, גלילת רשימה, כותרת לתמונה ועוד. שימושי מאוד למי שמחפש להוסיף קצת חיים לקונטרולים הסטנדרטיים והמשעממים שקיימים כמעט בכל אפליקציית web.

Bounce.js

ספריית Bounce.js היא ספריית Javascript המאפשרת לנו לייצר אנימציות CSS ע"י ממשק נוח ופשוט (יחסית). הכח האמיתי של הספרייה הוא הקלות בה ניתן ליצור אנימציות מורכבות ע"י שילוב של מספר מאפייני CSS שונים במקביל, וצפיה מיידית בתוצאות. בנוסף הספרייה מכילה מספר שילובים מוכנים מראש שניתן להתחיל מהם.

CSS Shake

כשמה כן היא, ספריית CSS Shake מספקת אחת עשרה אנימציות שונות עם מטרה אחת בלבד – להרעיד דברים! אני בעצמי עדיין לא בטוח מה עושים איתה, אבל היי – תודו שתמיד חלמתם לגרום ל-div לרעוד 😉

CSS3 Animation Cheat Sheet

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