Studio Editor: הוספת אנימציית גלילה
5 דקות
אנימציית גלילה עוזרת לכם ליצור חוויית גלישה אטרקטיבית ומקצועית יותר. התקדמות האנימציה מקושרת ישירות למיקום הגלילה – האלמנט נחשף או משתנה בזמן שהגולשים גוללים למעלה ולמטה.
טיפ:
בקורס שלנו ב-Wix Studio Academy תוכלו ללמוד איך להוסיף אנימציות ואינטראקציות.
הוספת אנימציית גלילה
כדי להוסיף אנימציית גלילה חדשה, בחרו את האלמנט שמפעיל אותה. האנימציה שתבחרו מתחילה כאשר הגולשים גוללים מעבר לאלמנט הזה. לאחר מכן, החליטו לאיזה אלמנט תתווסף האנימציה ובחרו סוג אנימציה (In – פנימה או Out – החוצה).
כדי להוסיף אנימציית גלילה:
- בחרו את האלמנט הרלוונטי.
- הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה)
.
- הקליקו על הלשונית Animations and Effects
(אנימציות ואפקטים). - הקליקו על + Add (הוספה) תחת Scroll (גלילה).
- הגדירו את האנימציה:
- ב-Animated element בחרו באיזה אלמנט תהיה האנימציה.
- בחרו אפשרות תחת Animation type (סוג אנימציה) כדי להחליט אם תנועת האלמנט תהיה לתוך המיקום הרצוי או מהמיקום המקורי שלו:
- In: נקודת הסיום של האנימציה היא העיצוב הנוכחי שבקנבס (לדוגמה, האלמנט מופיע לאט כשגוללים למטה).
- Out: נקודת ההתחלה של האנימציה היא העיצוב הנוכחי על הקנבס (לדוגמה, האלמנט נעלם לאט כשגוללים למטה).
- בחרו אנימציה מהרשימה.
טיפ: עמדו עם העכבר מעל האנימציות כדי לראות אותן בתצוגה מקדימה.
שימו לב:
- אי אפשר להגדיר אלמנט מקובע (pinned) כטריגר, כי הוא תמיד נשאר באותו מיקום (יחסית לאזור התצוגה של הגולש).
- ודאו שיש מספיק מקום בעמוד כדי שאנימציית הגלילה תופיע כמו שצריך. לדוגמה, אם האלמנט שלכם ממוקם על הקפל (fold) הראשון או האחרון של העמוד, יכול להיות שלא תראו את אנימציית הגלילה.
רוצים ליצור גלילה אופקית?
האפשרויות בחלונית ה-Inspector (עריכה) רלוונטיות לגלילה אנכית, אבל אתם יכולים להיעזר במדריך שלנו מ-Wix Academy כדי ליצור אפקט גלילה אופקית מרשים.
התאמה אישית של אנימציית גלילה
אחרי שבחרתם את האנימציה, הגדירו אותה כך שתפעל בדיוק כמו שאתם רוצים. ההגדרות האפשריות תלויות באנימציה הספציפית שבחרתם.
כדי לערוך אנימציית גלילה:
- בחרו את האלמנט הרלוונטי.
- הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה) .
- הקליקו על הלשונית Animations and Effects (אנימציות ואפקטים).
- הקליקו על אנימציית הגלילה שאתם רוצים לשנות.
- הקליקו על Adjust Animation כדי לשנות את ההגדרות שלה:
- Direction: בחרו את הכיוון שממנו האנימציה תגיע (למשל משמאל או מלמעלה).
- Scale: הגדירו את גודל היעד של האלמנט באנימציה. לדוגמה, 80% אומר שהאלמנט באנימציה יתכווץ ב-20%.
- Distance: החליטו כמה רחוק האלמנט יתקדם באנימציה.
- Animation area: החליטו באיזו נקודה בזמן הגלילה האנימציה תתחיל ותפסיק. 0% זה תחתית המסך ו-100% זה החלק העליון. לדוגמה, אם הגדרתם את האזור ל-0% - 50%, האנימציה תתחיל כשהאלמנט יהיה בתחתית המסך ותפסיק כשהוא יגיע לאמצעו.
טיפ:
הפעילו את המתג Scroll to preview כדי לראות את האנימציה שאתם יוצרים, ישירות על הקנבס.
הסרת אנימציית גלילה
בכל שלב אפשר להסיר אנימציית גלילה דרך חלונית ה-Inspector (עריכה).
כדי להסיר אנימציית גלילה:
- בחרו את האלמנט או המקטע הרלוונטיים.
- הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה) .
- הקליקו על הלשונית Animations and Effects (אנימציות ואפקטים).
- עברו עם העכבר מעל האנימציה והקליקו על אייקון הפעולות הנוספות
. - הקליקו על Remove (הסרה).
פתרון תקלות באנימציות גלילה
אפקט הגלילה מופיע מאוחר מדי
אם אנימציית הגלילה מתחילה מאוחר מדי או לא מתנהגת כצפוי, אתם יכולים לשנות את הגדרות ה-Animation type (סוג האנימציה – In פנימה או Out החוצה) והAnimation Area (אזור האנימציה) כדי לפתור את הבעיה.
צפו בסרטון ההדרכה כדי לגלות מה הגורם לעיכוב ואיך לתקן אותו.
(מובייל בלבד) אפקט הגלילה לא מופיע במצב אופקי
כשצופים באתר של הלקוחות שלכם במכשיר מובייל, ייתכן שאנימציית הגלילה תפסיק לעבוד אם הגולשים יסובבו את המסך באמצע הגלישה. במילים אחרות, אם הם יחזיקו את הטלפון לרוחב בזמן גלילת העמוד, אנימציית הגלילה לא תופיע.
כדי לפתור את הבעיה, הגולשים יכולים לרענן את העמוד בזמן שהוא במצב האופקי – זה "יפעיל מחדש" את האנימציה.