מרכז התמיכה של Wix
    ראשי
  1. Studio ותוכניות לפרטנרים ולארגונים
  2. Wix Studio
  3. שימוש ב-Studio Editor
  4. הוספת אפקטים ואנימציות
    5. Studio Editor: יצירת אינטראקציה בהתאמה אישית בעת הקלקה או מעבר עם העכבר

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

זמן קריאה: 6 דקות
בעזרת אינטראקציות אתם יכולים ליצור לגולשים חוויית גלישה דינמית כשהם מקליקים על אלמנטים או עומדים מעליהם עם העכבר. האינטראקציה יכולה לגרום לאנימציה של האלמנט שהפעיל אותה או של כל אלמנט אחר בעמוד.
עם אינטראקציות מותאמות, יש לכם חופש יצירתי מלא לעצב אנימציה מאפס. אתם יכולים לשלוט גם בתזמון של האנימציה, כדי להפוך אותה לאפקטיבית יותר. 
ב-Wix Studio Academy מחכים לכם עוד וובינרים, מדריכים וקורסים של Wix Studio.

שלב 1 | הוסיפו גורם לפעולה (קליק או מעבר עם העכבר)

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

כדי להוסיף גורם מפעיל:

  1. בחרו את האלמנט שיפעיל את האינטראקציה.
  2. הקליקו ב-editor מימין למעלה על אייקון פתיחת כלי ה-Inspector (עריכה) .
צילום מסך של פתיחת החלונית Inspector ב-Studio Editor
  1. הקליקו על הטאב Animations and Effects  (אנימציות ואפקטים).
  2. בחרו ב-Hover / Click (הקלקה / מעבר עם העכבר).
  3. הקליקו על ‎+ Add (הוספה). 
טאב האנימציות והאפקטים בחלונית ה-Inspector (עריכה). המשתמש מוסיף אנימציה חדשה של מעבר עכבר

שלב 2 | הגדירו את האינטראקציה

עכשיו אתם יכולים לבחור באיזה אלמנט תופיע האנימציה, איזו אנימציה תופיע, ואת הפעולה המדויקת שתתרחש במעבר עם העכבר או הקלקה (למשל, הפעלת האנימציה, כיבוי שלה וכו').

כדי להגדיר את האינטראקציה:

  1. (בחלונית ה-Setup) בחרו אפשרות מהתפריט הנפתח On Hover / On Click (במעבר עם עכבר / בהקלקה):
    • Start Animation: הקלקה / מעבר עם העכבר מעל לאלמנט מפעילים את האנימציה שבחרתם.
    • Toggle On/Off: בדומה למתג, קליק על האלמנט מפעיל את האנימציה וקליק נוסף מסיר אותה.
    • Reset Animation: הקלקה / מעבר עם העכבר מעל לאלמנט מסירה אנימציה שהופעלה קודם.
  2. בחרו אפשרות מהתפריט הנפתח Animated element (אלמנט מונפש):
    • Make the element trigger its own animation: הקליקו על שם האלמנט (המילה (self) מופיעה לידו).
    • Animate a different element on the page: בחרו אלמנט מהתפריט הנפתח, או הקליקו על Choose on Canvas (בחירה על גבי הקנבס) כדי לבחור אותו בעמוד.
      טיפ: החזיקו את המקש Cmd / Ctrl כדי לבחור אלמנט צאצא.
  3. הקליקו על הטאב Custom (מותאם). 
  4. הקליקו על Create Custom Animation (יצירת אנימציה מותאמת).
טיפ:
האנימציות המותאמות שאתם יוצרים נשמרות לשימוש עתידי באלמנטים אחרים. 
צילום מסך של הטאב המותאם כשעדיין אין אנימציות שמורות

שלב 3 | ערכו את האנימציה

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

כדי לערוך את האנימציה:

  1. בחרו איך לשנות את האנימציה:
2.  (לא חובה) הקליקו על  Play (הפעלה) בסרגל הצף כדי לצפות בתצוגה מקדימה של האנימציה.
3. כשאתם מוכנים, הקליקו על Done (סיום).
קובץ GIF שמציג את התצוגה המקדימה של האנימציה על הקנבס
טיפ:
אם תגדירו שאלמנט מסוים יופיע רק בקליק או במעבר עכבר, על הקנבס תהיה לו מעין שכבת-כיסוי משובצת שמסמנת שבמצב הראשוני שלו האלמנט שקוף. 
כפתור שמוגדר להופיע במעבר עכבר, ובקנבס ב-Studio Editor יש לו שכבת כיסוי משובצת
בכל שלב אפשר לבטל את הסימון הזה. הקליקו על האייקון של Wix Studio , עמדו עם העכבר מעל View (תצוגה) והקליקו על Transparent Elements(אלמנטים שקופים).

שאלות נפוצות

הקליקו למטה לפרטים נוספים על יצירת אינטראקציות. 

זה עזר לך?

|
בעמוד מידע הזה
  • שלב 1 | הוסיפו גורם לפעולה (קליק או מעבר עם העכבר)
  • שלב 2 | הגדירו את האינטראקציה
  • שלב 3 | ערכו את האנימציה
  • שאלות נפוצות