אני מודה שאני מכור לאנימציות 🤗 . אנימציית לוטי מוסיפה חיים לאתר אינטרנט תדמיתי או לכרטיס ביקור דיגיטלי ומעשירה את תוכנו, גורמת לגולש להתעכב על ביצועיה ועל הדרך משאירה אותו עוד פרק זמן באתר שלנו, דבר שתורם לזמן נטישה נמוך יותר, דבר שנלקח בחשבון בפרמטר קידום האתר בגוגל.
בפוסט הנוכחי אלמד אתכם כיצד מוסיפים אנימציית לוטי לאתר, כיצד עורכים אותה טרם הוספתה לאתר, שינוי התכונות שלה כגון צבעים ומהירות ועוד.
ראשית יש להוסיף את וידג'ט lottie לאזור נבחר בדף
לאחר מכן נכנס לאתר המוביל של אנימציות הלוטי בכתובת https://lottiefiles.com
בשורת החיפוש נקליד מילה או יותר המתארים את מהות החיפוש שלנו: children, sofa וכו
בתוצאות החיפוש נקבל עשרות קבצי לוטי חינמיים להורדה וגם כאלה שבתשלום במחירים סבירים בהחלט ( עד 10$ לאנימציה )
יש לנווט בין הדפים עד למציאת קובץ מתאים
נבחר את הקובץ שמצא חן בעיניינו ונלחץ עליו
בתחתית הקובץ יש פעולות אפשריות לעריכת הלוטי כמו צבעי הרקע, מהירות האנימציה, צבעי הלוטי
כעת נבחר לדוגמא את עריכת הצבעים של הקובץ עצמו ונלחץ על הקישור
בצד שמאל יופיעו כל שכבות הלוטי' ולחיצה על שכבה מסויימת תגלה את כל הצבעים שהיא מכילה והם יופיעו בצד ימין של הקובץ, וניתן יהיה לערות אותם על ידי בחירה מלוח הצבעים או אפילו להוסיף צבע מותאם ע"י מספרו הקטלוגי לדוגמא 0E2F3E
לאחר מכן יש ללחוץ על הורדת קובץ JSON והקובץ ירד למחשב
במידה ואנחנו מרוצים מהקובץ המקורי אזי יש לוותר על השלב הקודם ולפעול לפי המסומן בתמונה הבאה
שימו לב כי ניתן להוריד את הקובץ בכמה וריאציות
- קובץ לוטי
- קובץ זיפ
- קובץ GIF
- קובץ MP4
כעת ניגש להוסיף את הקובץ לאתר ולאחר מכן נקבע את מיקומו וישנה אפשרות להוסיף קישור שיפתח בעת לחיצה על קובץ הלוטי
לאחר מכן באפשרותנו לערוך את הקובץ לפי כמה פרמטרים
- האם הקובץ יתנגן פעם אחת אם בלופ
- זמן הניגון של הקובץ
- מהירות ניגון הקובץ
- התחלה וסיום
- האם לאפשר חזרה לאחור ( רוורס )
- והאם לאפשר טעינה עצלה ( lazy load ) – קבצי לוטי הם בעלי משקל לא מבוטל ולעיתים קרובות משפיעים על מהירות טעינת האתר. ישנם בעלי אתרים שאינם מוכנים לוותר על הקובץ גם במחיר טעינת אתר במהירות פחותה, ניתן להקל על כך באמצעות סימון lazy load המאפשר טעינה עצלה שתקטין את הנזק
ולבסוף ניתן לערוך את גודל הקובץ שיותאם למימדי האיזור וליתר האלמנטים שמסביבו
