הגדרת אנימציות
Slidde.co מאפשרת לך להחיל אנימציות keyframe סטנדרטיות של CSS על אלמנטים בדף האינטרנט שלך בקלות. הנה מדריך שלב אחר שלב שיעזור לך להתחיל.
אפשרות האנימציה בסרגל הצד
- בחר אלמנט: לחץ על כל אלמנט בדף שלך.
- פתח את המודאל אנימציה: בסרגל הצד הימני, לחץ על כפתור הלשונית אנימציות, תמצא את האפשרות אנימציה. לחץ עליה כדי לפתוח חלון מודאלי.
- התחל עם תבניות מוכנות: אנו ממליצים להתחיל עם אנימציות מוכנות מראש, אותן תוכל לשנות מאוחר יותר בהתאם לצרכים שלך. תוכל ללחוץ על כפתורי התבניות כדי להחליף לתבנית מוכנה. אם תלחץ על סמל הפלוס בכפתור, התבנית תתווסף לאנימציה הנוכחית.
התאמת אנימציות
המודאל של האנימציה מפשט את תהליך הגדרת אנימציות keyframe של CSS לממשק קוד נמוך, מה שהופך אותו לנגיש גם אם אינך מכיר קוד.
אנימציות keyframe הן המקום שבו אתה מגדיר את תכונות ה-CSS לאחוזים מסוימים. והדפדפן מטפל במעבר עבורך.
לדוגמה, אם יש לך keyframes כאלה עם משך זמן של 4 שניות.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
האובייקט יזוז 20 פיקסלים כלפי מטה במשך 2 שניות, ואז יזוז 20 פיקסלים למעלה חזרה למקומו המקורי במשך 2 שניות.
אם אתה נתקל בבעיות או רוצה ללמוד עוד על אנימציות keyframe:
- חפש באינטרנט: גגל את השאלות הספציפיות שלך; ישנם הרבה דוגמאות ומשאבים זמינים.
- מדריך CSS Keyframes: עיין במדריך הרשמי של CSS keyframes ב-MDN למידע מקיף.
הפעלה
שדה זה שולט מתי האנימציה מופעלת.
- אלמנט מוצג: זהו ברירת המחדל. האנימציה תופעל כאשר האלמנט יגולל לתצוגה או כאשר החלק המכיל יוצג קטע האש
- אלמנט מוצג (ניגון מחדש בכל פעם): כמו הקודם, למעט שהאנימציה תתנגן מחדש בכל פעם שהאלמנט מוצג.
- דף נטען: האנימציה תופעל כאשר הדף נטען.
יעד(ים)
בדרך כלל אין צורך להגדיר זאת. ערך ברירת המחדל הוא & שמשמעותו האלמנט הראשי.
עם זאת, ישנם מקרים שבהם תצטרך להגדיר זאת.
כדי להנפיש את אלמנט ה-רקע מתקדם, ניתן להגדיר יעד(ים) ל-אלמנט ילד ראשון, מכיוון שאלמנט ה-רקע מתקדם תמיד יהיה הילד הראשון של האלמנט הראשי.
כדי להחיל עיכוב מדורג על כל אלמנטי הילדים. קרא עוד בסעיף עיכוב ועיכוב מדורג לפרטים נוספים.
עיכוב ועיכוב מדורג
אם תגדיר השהיה ל-1000ms, האנימציה תתנגן לאחר המתנה של 1000ms.
אם תגדיר השהיה ל-50ms ותגדיר מטרות ל-כל אלמנטי הילדים הישירים. האנימציה תחול על כל אחד מאלמנטי הילדים הישירים, ותמתין
- אלמנט ראשון, 1000ms,
- אלמנט שני, 1050ms,
- אלמנט שלישי, 1100ms,
- ...
עיכוב טקסט
זה עובד עבור רכיב טקסט.
אם תגדיר השהיה ותגדיר מטרות ל-כל האותיות. אפקט העיכוב יחול על כל אות.
שימוש בתכונת animation של CSS
אנימציה פשוטה של CSS זמינה תמיד לכל האלמנטים ב-CSS. אך ייתכן שתצטרך להפעיל Disable in canvas עבור כלל ה-CSS הספציפי הזה כדי לאפשר עריכה קלה יותר בעורך.