איך לשדרג את דפי הנחיתה והאתר שלכם בעזרת אנימציות - מקום ברשת

איך לשדרג את דפי הנחיתה והאתר שלכם בעזרת אנימציות

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

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

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

קובץ לוטי אפשר ליצור בעזרת תוכנת Adobe After Effects, בה משתמשים יוצרי וידאו ואנימטורים, על-ידי שימוש בפלאגין מיוחד לתוכנה שנקרא Bodymovin. לוטי אגב נולד בבית היוצר של Airbnb (כן כן, אותה חברה של אתר הסאבלטים לדירות) והוא כלי מבוסס קוד פתוח. למעוניינים במידע יותר מעמיק, ניתן לקרוא עוד באתר החברה.

אז איך אפשר להשתמש בקבצי האנימציה באתר?

ראשית, מחפשים אנימציה שאוהבים ורוצים להשתמש בה באתר Lottie Files שם מעלים אנימטורים את יצירותיהם לשימוש הקהל הרחב.

לאחר שמצאנו משהו שנרצה להטמיע באתר, נלחץ על כפתור ה-html שיופיע בדף הקובץ:

איך מוספים אנימציות לאתר

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

אנימציות לוטי וורדפרס

לאחר שבחרנו בדיוק את התצורה שמתאימה לנו, נעתיק את קוד ההטמעה שיוצג לנו בהמשך העמוד:

lottie אנימציה וורדפרס

ואת הקוד הזה נטמיע באתר.

אפשר להטמיע את הקוד באלמנטור, דרך ווידג׳ט ה-HTML:

איך מוסיפים lottie בוורדפרס

והנה האנימציה מוצגת:

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

 

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

@Vanesa Melonio / Lottie Files

וזהו!

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

תהנו!

אתר זה מאוחסן ב:

אתר זה נבנה באמצעות:

יו, הגעת לסוף הכתבה 😯 מה עכשיו?

1. אם אהבת את התוכן, אפשר לשתף עם חברים:

Share on facebook
שיתוף בפייסבוק
Share on twitter
שיתוף בטוויטר
Share on linkedin
שיתוף בלינקדאין
Share on whatsapp
שיתוף בווטסאפ

2. אפשר לספר לנו מה חשבת, כדי שנוכל להמשיך להשתפר

כמה כתבה זו עזרה לך?

בחר/י כדי להצביע!

מאחר ואהבת את הכתבה...

נשמח לראותך גם ברשתות החברתיות שלנו!

מצטערים לשמוע שהכתבה לא היתה לך לעזר!

נשמח לשפר אותה!

תרצה/י לשתף אותנו מה אפשר לשפר בכתבה?

דירוג ממוצע לכתבה זו:
5
(2)

3. אפשר להירשם לקבלת עדכונים על כתבות ומדריכים חדשים:

העדכונים נשלחים אחת לשבוע, בימי חמישי בשעה 10:00 בבוקר וכוללים קישורים לכל הכתבות שפורסמו באותו שבוע.

עוד כתבות שעשויות לעניין אותך:

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

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

סליחה על ההפרעה...

רק קפצתי לבדוק מה שלומך

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

זה משהו שיכול לעניין אותך?

* הקישור נפתח בחלונית חדשה כך שיהיה אפשר להמשיך לקרוא את הכתבה