Studio Editor: מידע על אנימציות

זמן קריאה: 2 דקות
שילוב האנימציות שלנו בעיצובים שלכם יכול להביא אותן לרמה הבאה. ב-Studio Editor יש 5 סוגים שונים של אנימציות – תלוי מתי אתם רוצים שהן יופיעו.
אנימציות יכולות להופיע כשהגולשים עומדים עם העכבר מעל אלמנט, מקליקים עליו או גוללים אותו. אפשר גם להוסיף אנימציית כניסה, למשל בפעם הראשונה שאלמנט עולה, או אנימציה שפועלת בלופ - הכל בלי אף שורת קוד.
שמיו לב:
גודל האנימציה מחושב בהתאם לדפדפן הספציפי שלכם בפעם הראשונה שבה העמוד נטען. אם תשנו את גודל חלון הדפדפן (על ידי גרירה של נקודות האחיזה שלו), יכול להיות שהאנימציה לא תופיע כמו שצריך. מומלץ לרענן את העמוד כדי לקבל תצוגה אופטימלית.

אנימציית כניסה

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

אינטראקציות של מעבר עכבר והקלקה

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

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

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

אנימציית לופ (Loop)

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

זה עזר לך?

|