התשובה בדרך...

Wix Editor: הוספה והתאמה אישית של אנימציה

זמן קריאה: 3 דקות
האנימציות יכולות להכניס חיים לאתר שלכם. אפקטים כמו Float-in (ריחוף פנימה) ו-Expand-in (התקרבות פנימה) עוזרים ליצור עמודים מרשימים יותר. אתם יכולים לבחור איך ומתי יופעלו האנימציות – פעם אחת בלבד, בזמן גלילה, בלופ ועוד. 
אפשר להוסיף אנימציות למגוון אלמנטים, ואפילו להפעיל אפקטים שונים על אותו אלמנט באתר המחשב ובאתר המובייל. האנימציות שלנו למובייל מיועדות למסכים קטנים יותר, כך שתוכלו להרשים את הגולשים בכל מכשיר. 
gif שמציג אנימציות תמונה שונות בזמן הגלילה של האתר.
הנושאים בעמוד זה:
יש לכם בעיות עם האנימציה?
היעזרו בשלבים האלה כדי לוודא שהאנימציות עובדות כצפוי באתר שלכם.

הוספת אנימציה לאלמנט

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

כדי להוסיף אנימציה:

  1. הקליקו על האלמנט הרלוונטי ב-editor.
  2. הקליקו על אייקון האנימציה .
  3. בחרו אנימציה מהאפשרויות הזמינות.
    • Entrance: האנימציה מופעלת רק פעם אחת כשהאלמנט שנבחר מופיע על המסך.
    • Loop: האנימציה פועלת ברצף בלופ.
    • Scroll: האנימציה מופעלת כשהאלמנט נגלל לתצוגה. 
גיף שמדגים כמה אנימציות שונות שאפשר להציג בלופ.
שימו לב:
האנימציה של אלמנטים ב-header תפעל רק פעם אחת, בכניסה הראשונה לעמוד.

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

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

כדי להתאים אישית את האנימציה:

  1. הקליקו על האלמנט הרלוונטי ב-editor.
  2. הקליקו על אייקון האנימציה .
  3. הקליקו על Customize (התאמה אישית) והשתמשו באפשרויות להתאמה אישית של האנימציה: 
    • Power: הקליקו על התפריט הנפתח כדי לבחור את עוצמת האנימציה כשהיא מופעלת.
    • Direction: בחרו מאיזה כיוון האנימציה נכנסת (למשל, עם כיוון השעון, מימין).
    • Distance: השתמשו בסליידר כדי לשנות את המרחק בין נקודת ההתחלה לנקודת הסיום של האפקט.
    • Duration: (משך זמן) גררו את פס ההזזה כדי לקבוע כמה זמן אתם רוצים שהאנימציה תפעל.
    • Delay: גררו את פס ההזזה כדי להגדיל או להקטין את משך הזמן שעובר בין טעינת העמוד לבין התחלת האנימציה.
    • Animation type: בחרו את סוג האנימציה – פנימה, החוצה או רציף בזמן הגלילה. 
    • Motion style: בחרו את עוצמת התנועה, למשל עדינה או בינונית.
צילום מסך של ההגדרות לאנימציית ההיפוך. מוצגות הגדרות שונות כמו כיוון ומשך האנימציה.

הוספת אנימציות לאתר המובייל

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

כדי להוסיף אנימציה במובייל:

  1. עברו לעורך המובייל.
  2. הקליקו על האלמנט הרלוונטי.
  3. הקליקו על אייקון האנימציה .
  4. בחרו אנימציה מהאפשרויות הזמינות.
בחירת אנימציה לאלמנט בעורך המובייל
הערה חשובה לגבי Velo:
אם אתם משתמשים ב-Velo (קוד) כדי להסתיר או להציג אלמנט, גם את האנימציה שלו צריך להגדיר דרך Velo. 

זה עזר לך?

|