Studio Editor: הוספת אינטראקציה מוגדרת מראש להקלקה או למעבר עכבר
זמן קריאה: 5 דקות
בעזרת אינטראקציות אתם יכולים ליצור לגולשים חוויית גלישה דינמית כשהם מקליקים על אלמנטים או עומדים מעליהם עם העכבר. צריכים אנימציה קלה ומהירה? השתמשו באחת מהאנימציות המוכנות שלנו (למשל Grow – גדילה, Move – הזזה, Fade – דהייה) ולשנות אותו לפי טעמכם.
האינטראקציה יכולה להנפיש את אותו האלמנט שהגולשים מקליקים עליו או עוברים מעליו עם העכבר, או אלמנט אחר בעמוד. כך או כך, יש לכם שליטה מלאה במראה, בתחושה ובתזמון כדי שהאנימציה תהיה אפקטיבית.
שלב 1 | הוספת גורם מפעיל (קליק או מעבר עם העכבר)
קודם כל צריך לבחור את האלמנט שמפעיל את האינטראקציה. זה האלמנט שהגולשים מקליקים או עומדים מעליו עם העכבר לפני שהם רואים את האנימציה. אחר כך, עברו לחלונית ה-Inspector כדי להוסיף אינטראקציה חדשה.
טיפ:
אתם יכולים להוסיף מספר אינטראקציות לאותו אלמנט כדי שהוא יפעיל אנימציות שונות בקליק או במעבר עם העכבר.
כדי להוסיף גורם מפעיל:
- בחרו את האלמנט שאמור להפעיל את האינטראקציה.
- הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה)
.
- הקליקו על הטאב Animations and Effects
(אנימציות ואפקטים). - בחרו ב-Hover / Click (הקלקה / מעבר עם העכבר).
- הקליקו על + Add (הוספה).
שלב 2 | הגדרת האינטראקציה
אחרי שבחרתם אלמנט וגורם מפעיל, הגדירו את האינטראקציה. בחרו אנימציה מוכנה, את האלמנט שאמור להציג אותה, ואת מה שקורה במעבר עם העכבר או בהקלקה.
שימו לב:
האנימציות הזמינות תלויות באלמנט שבחרתם.
כדי להגדיר את האינטראקציה:
- (In the Setup panel)(בחלונית ההגדרה) בחרו מה יקרה On Hover / On Click (במעבר עכבר / בהקלקה):
- 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 (תצוגה מקדימה) כדי לראות איך האנימציה נראית ולבצע התאמות במקרה הצורך.
שאלות נפוצות
הקליקו למטה לפרטים נוספים על יצירת אינטראקציות.
מה קורה לאלמנט שמפעיל אנימציה משלו?
איך נראית אינטראקציה בין אלמנטים שונים?
האם אלמנט אחד יכול להפעיל מספר אלמנטים אחרים?
האם לאלמנט בודד יכולות להיות כמה אנימציות?