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

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

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

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

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

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

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

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

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

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

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

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

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

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

זה עזר לך?

|