Studio Editor: הוספת אינטראקציה מוגדרת מראש בהקלקה או מעבר עכבר
זמן קריאה: 5 דקות
הוסיפו אינטראקציות כדי ליצור תנועה כשהגולשים מקליקים על אלמנטים או עוברים מעליהם עם העכבר. צריכים אנימציה קלה ומהירה? השתמשו באחת מהערכות המוכנות שלנו (לדוגמה Grow (גדילה), Move (תזוזה), Fade (דהייה)) והתאימו אותן לטעמכם.
האינטראקציה יכולה להנפיש את אותו האלמנט שהגולשים מקליקים עליו או עוברים מעליו עם העכבר, או אלמנט אחר בעמוד. כך או כך, יש לכם שליטה מלאה במראה, בתחושה ובתזמון כדי שהאנימציה תהיה אפקטיבית.
שלב 1 | הוספת גורם מפעיל (קליק או מעבר עם העכבר)
כדי להתחיל, בחרו את האלמנט שמפעיל את האינטראקציה. זה האלמנט שהגולשים מקליקים או עוברים מעליו עם העכבר לפני שהם רואים את האנימציה. אחר כך, עברו לטאב Interactions (אינטראקציות) בחלונית ה-Inspector (עריכה) כדי להוסיף אינטראקציה חדשה.
טיפ:
אתם יכולים להוסיף מספר אינטראקציות לאותו אלמנט כדי שהוא יפעיל אנימציות שונות בקליק או במעבר עם העכבר.
כדי להוסיף גורם מפעיל:
- בחרו את האלמנט שאמור להפעיל את האינטראקציה.
- הקליקו על החץ לפתיחת חלונית ה-Inspector (עריכה)
בפינה הימנית העליונה של ה-Editor. - הקליקו על הטאב Interactions (אינטראקציות).
. - בחרו ב-Hover / Click (הקלקה / מעבר עם העכבר).
- הקליקו על + Add (הוספה).
שלב 2 | הגדרת האינטראקציה
אחרי שבחרתם אלמנט וגורם מפעיל, הגדירו את האינטראקציה. בחרו אנימציה מוכנה, את האלמנט שאמור להציג אותה, ואת מה שקורה במעבר עם העכבר או בהקלקה.
שימו לב:
האנימציות הזמינות תלויות באלמנט שבחרתם.
כדי להגדיר את האינטראקציה:
- (בחלונית Interaction Setup) בחרו מה קורה במעבר עכבר / בהקלקה:
- Start Animation: הקלקה / מעבר עם העכבר מעל לאלמנט מפעילים את האנימציה שבחרתם.
- Reset Animation: הקלקה / מעבר עם העכבר מעל לאלמנט מסירה אנימציה שהופעלה קודם.
- Toggle On/Off: קליק על האלמנט מפעיל את האנימציה וקליק נוסף מסיר אותה.
שימו לב: האפשרות הזו זמינה רק לאינטראקציות הקלקה.
- בחרו את ה-Animated element (אלמנט האנימציה) :
- Make the element trigger its own animation: הקליקו על שם האלמנט (המילה (self) מופיעה לידו).
- Animate a different element on the page: בחרו אלמנט מהתפריט הנפתח, או הקליקו על Choose on Canvas (בחירה על גבי הקנבס) כדי לבחור אותו בעמוד.
טיפ: החזיקו את המקש Cmd / Ctrl כדי לבחור אלמנט צאצא.
- בחרו אנימציה:
- הקליקו על הטאב Presets (ערכות מוכנות).
- בחרו אנימציה מהרשימה.
טיפ:
כשאתם מגדירים אלמנט כך שיופיע בקליק או במעבר העכבר, מתווספת לו שכבת-כיסוי משובצת שמציינת שבמצב הראשוני שלו הוא שקוף.
אתם יכולים לבטל את הסימון הזה של שכבת הכיסוי המשובצת. הקליקו על האייקון של Wix Studio 
, עברו עם העכבר מעל View (תצוגה) והקליקו על Transparent Elements (אלמנטים שקופים).
, עברו עם העכבר מעל View (תצוגה) והקליקו על Transparent Elements (אלמנטים שקופים).שלב 3 | (לא חובה) שנו את האנימציה
אחרי שבחרתם את האנימציה הרצויה, ערכו אותה כדי להשיג את האפקט הרצוי. אתם יכולים לשלוט בהגדרות כמו משך הזמן, ההשהיה והדרגתיות כדי להפוך את האנימציה לאפקטיבית.
שימו לב:
ההגדרות הזמינות תלויות בערכה המוכנה שבחרתם.
כדי לערוך את האנימציה:
- (בחלונית ה-Inspector) הקליקו על Adjust Animation (התאמת אנימציה) בתחתית.
- שנו את ההגדרות הזמינות בהתאם להעדפה שלכם:
- Delay: גררו את פס ההזזה כדי להוסיף השהייה (בשניות) לפני שהאנימציה מתחילה.
- Duration: גררו את פס הזזה כדי לקבוע את משך האנימציה (בשניות).
- Easing: בחרו את הדרגתיות ההפעלה וההפסקה של האנימציה בתפריט הנפתח.
- Scale: בחרו כמה האלמנט יגדל או יקטן.
- Angle: שנו את זווית התנועה.
- Distance: גרמו לאלמנט להתרחק או להתקרב למיקום ברירת המחדל שלו בעמוד.
- Direction: שנו את כיוון שבו האלמנט מסתובב.
- (לא חובה) הקליקו על Preview (תצוגה מקדימה) כדי לראות איך האנימציה נראית ולבצע התאמות במקרה הצורך.
שאלות נפוצות
הקליקו למטה לפרטים נוספים על יצירת אינטראקציות.
מה קורה לאלמנט שמפעיל אנימציה משלו?
איך נראית אינטראקציה בין אלמנטים שונים?
האם אלמנט אחד יכול להפעיל מספר אלמנטים אחרים?
האם לאלמנט בודד יכולות להיות כמה אנימציות?
זה עזר לך?
|