Wix Editor: הוספה והתאמה אישית של אנימציה
4 דקות
האנימציות יכולות להכניס חיים לאתר שלכם. אנחנו מציעים אנימציות שונות לכל היבט בעיצוב שלכם – אנימציות כניסה, גלילה, לופ ואפילו באפקטים של העכבר.
אתם יכולים לערוך את האנימציה כך שהיא תהיה בדיוק מה שרציתם. לדוגמה, אפשר לשנות את המרחק, משך הזמן, ההשהיה ועוד. האנימציות שלנו למובייל מיועדות למסכים קטנים יותר, כדי שתוכלו להרשים את הגולשים בכל מכשיר.
תוכלו להוסיף אנימציות ואפקטים שונים לאותו אלמנט.
יש לכם בעיות עם האנימציה?
חשוב להקפיד על השלבים האלה כדי להבטיח שהם יפעלו כמצופה באתר.
הוספת אנימציה לאלמנט
האתר שלכם יהיה דינמי ומושך יותר אם תוסיפו אנימציה לאלמנטים. לכל אנימציה יש אפקט ייחודי משלה, ואתם יכולים לשלב אותן יחד עם אלמנטים שונים.
טיפ:
אפשר גם להוסיף אנימציה לקבוצה של אלמנטים – בוחרים בקבוצה ומקליקים על אייקון האנימציה 
.
.כדי להוסיף אנימציה:
- הקליקו על האלמנט הרלוונטי ב-editor.
- הקליקו על אייקון האנימציה .
- בחרו אנימציה מהאפשרויות הזמינות.
- Entrance (כניסה): האנימציה תפעל פעם אחת כשהאלמנט הנבחר יופיע על המסך.
- Loop (לופ): האנימציה תחזור על עצמה ברצף.
- Scroll (גלילה): האנימציה תפעל כשהאלמנט נגלל לתצוגה.
- Motion and Effects (תנועה ואפקטים): האנימציה מתחילה לזוז כשסמן העכבר של הגולש עובר עם העכבר מעל האלמנט.
שימו לב:
האנימציה של אלמנטים ב-header תפעל רק פעם אחת, בכניסה הראשונה לעמוד.
התאמה אישית של אנימציה
אחרי שהוספתם אנימציה לאלמנט, תוכלו להתאים אותה אישית כדי שהיא תתנהג כמו שאתם רוצים ותתאים לתחושה של האתר.
התאימו הגדרות כמו עוצמה, כיוון והשהיה כדי לעשות רושם ולמשוך את תשומת לב הגולשים.
שימו לב:
אפשרויות ההתאמה האישית הזמינות תלויות באנימציה שתבחרו.
כדי להתאים אישית את האנימציה:
- הקליקו על האלמנט הרלוונטי ב-editor.
- הקליקו על אייקון האנימציה .
- הקליקו על Customize (התאמה אישית) והשתמשו באפשרויות להתאמה אישית של האנימציה:
- Power: הקליקו על התפריט הנפתח כדי לבחור את עוצמת האנימציה כשהיא מופעלת.
- Direction: בחרו מאיזה כיוון האנימציה נכנסת (למשל, עם כיוון השעון, מימין).
- Distance: השתמשו בסליידר כדי לשנות את המרחק בין נקודת ההתחלה לנקודת הסיום של האפקט.
- Duration: (משך זמן) גררו את פס ההזזה כדי לקבוע כמה זמן אתם רוצים שהאנימציה תפעל.
- Delay: גררו את פס ההזזה כדי להגדיל או להקטין את משך הזמן שעובר בין טעינת העמוד לבין התחלת האנימציה.
- Velocity (מהירות): גררו את הסליידר כדי לשנות את מהירות האפקט - ככל שהמספר יהיה נמוך יותר, האפקט יהיה מהיר יותר.
- Movement axis (ציר התנועה): החליטו אם האלמנט ינוע בצורה אופקית, אנכית או בשני הצירים.
- Animation type: בחרו את סוג האנימציה – פנימה, החוצה או רציף בזמן הגלילה.
- Pivot: בחרו את נקודת הייחוס שממנה האלמנט מתחיל לנוע.
- Motion (תנועה): בחרו את עוצמת התנועה, למשל עדינה או מתונה.
טיפ בנושא נגישות:
אם מדובר באלמנט דקורטיבי בלבד, כלומר, לא כולל מידע חשוב לקוראי מסך, סמנו את תיבת הסימון Decorative (דקורטיבי) בחלונית Settings 
(ההגדרות).
(ההגדרות).הוספת אנימציות לאתר המובייל
אתם יכולים להוסיף אנימציה לאלמנטים לא רק באתר המיועד למחשב אלא גם באתר המובייל, כדי שהגולשים ייהנו מחוויית גלישה נהדרת בכל המכשירים.
האנימציות למובייל עוצבו במיוחד לרזולוציות ולגדלים של מסכים קטנים, כך שאתם לא צריכים לדאוג לגבי המקום.
שימו לב:
אפקטים של אנימציה שתוסיפו במחשב לא עוברים לאתר המובייל, כי הם מותאמים לגדלים שונים של מסכים. אם אתם רוצים שלאלמנט תהיה אנימציה גם במובייל, בצעו את השלבים הבאים.
כדי להוסיף אנימציה במובייל:
- עברו ל-editor למובייל.
- הקליקו על האלמנט הרלוונטי.
- הקליקו על אייקון האנימציה .
- בחרו אנימציה מהאפשרויות הזמינות.
הערה חשובה לגבי Velo:
אם אתם משתמשים ב-Velo (קוד) כדי להסתיר או להציג אלמנט, גם את האנימציה שלו צריך להגדיר דרך Velo.