הגדרת אנימציות
Slidde.co מאפשרת לך להחיל אנימציות keyframe סטנדרטיות של CSS על אלמנטים בדף שלך בקלות. הנה מדריך שלב אחר שלב שיעזור לך להתחיל.
אפשרות האנימציה בסרגל הצד
- בחר אלמנט: לחץ על כל אלמנט בדף שלך.
- פתח את אנימציה מודאל: בסרגל הצד הימני, גלול לתחתית שם תמצא את האפשרות אנימציה. לחץ כדי לפתוח חלון מודאלי.
שימוש באנימציות מוכנות מראש
- התחל עם אנימציות מוכנות מראש: אנו ממליצים להתחיל עם אנימציות מוכנות מראש, אותן תוכל לשנות בהתאם לצרכיך.
- מצא עוד אנימציות מוכנות מראש: תוכל למצוא רשימה של אנימציות מוכנות מראש ב-Animate.css. אם אתה זקוק לאנימציה מסוימת, הודע לנו ונוכל להוסיף אותה לרשימה.
התאמת אנימציות
המודאל של האנימציה מפשט את תהליך הגדרת אנימציות keyframe של CSS לממשק קוד נמוך, מה שהופך אותו לנגיש גם אם אינך מכיר קוד.
אנימציות keyframe הן המקום שבו אתה מגדיר את תכונות ה-CSS עבור אחוזים מסוימים. והדפדפן מטפל במעבר עבורך.
לדוגמה, אם יש לך keyframes כאלה עם משך של 4 שניות.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
האובייקט יזוז 20px כלפי מטה במשך 2 שניות, ואז יזוז 20px למעלה חזרה למקומו המקורי במשך 2 שניות.
אם אתה נתקל בבעיות או רוצה ללמוד עוד על אנימציות keyframe:
- חפש באינטרנט: חפש בגוגל את השאלות הספציפיות שלך; ישנם הרבה דוגמאות ומשאבים זמינים.
- מדריך CSS Keyframes: עיין במדריך הרשמי של CSS keyframes ב-MDN למידע מקיף.
אנימציה של אלמנטים ילדים
אתה יכול למקד את הילדים של האלמנט הראשי על ידי הגדרת Targets ל-&>*.
עיכוב מדורג
אם תשנה את העיכוב לערכים הבאים, אפקט מדורג ייושם.
targets: &>*
delay: anime.stagger(100) // מגדיל את העיכוב ב-100ms לכל אלמנט.
targets: &>*
delay: anime.stagger(100, {start: 500}) // העיכוב מתחיל ב-500ms ואז מגדיל ב-100ms לכל אלמנט.
לעוד דוגמאות, אנא עיין כאן יסודות הדירוג
דירוג טקסט
זה עובד עבור רכיב טקסט.
אם תגדיר את היעדים ל"כל האותיות" (& .letter). אפקט הדירוג ייושם על כל אות.
שימוש במאפיין animation של CSS
אנימציה פשוטה של css תמיד זמינה לכל האלמנטים ב-סגנונות מותאמים אישית. אבל ייתכן שתצטרך להפעיל את Disable in canvas עבור כלל ה-CSS הספציפי הזה כדי לאפשר עריכה קלה יותר בעורך.