איך לגרום לכל האלמנטים בדף להופיע באנימציה עדינה בעת גלילה?

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

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

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

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

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

יוצרים אנימציית כניסה!

1. הוסיפו את הסקריפט הבא לFooter (חשוב שהקוד יטען אחרי טעינת jQuery, באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):

   
   <script>
   document.addEventListener("DOMContentLoaded", function(event) {
       jQuery(window).scroll(function() {
           jQuery( ".elementor-widget:not(.disable-fade-in)" ).each(function( index ) {
               let topOfElement = jQuery(this).offset().top;
               let bottomOfElement = jQuery(this).offset().top + jQuery(this).outerHeight();
               let bottomOfScreen = jQuery(window).scrollTop() + jQuery(window).innerHeight();
               let topOfScreen = jQuery(window).scrollTop();
               let offset = 50;
               if (window.matchMedia("only screen and (max-width: 767px)").matches) {
                  offset = 0;
               }
   
               if ((bottomOfScreen > topOfElement + offset) && (topOfScreen < bottomOfElement)){
                   jQuery(this).addClass('show');
               } else {
                   jQuery(this).removeClass('show');
               }
           });
       }).scroll();
   });
   </script>
   

2. כעת הוסיפו גם CSS בקובץ גלובלי שנטען בכל עמודי האתר.

   
   /* Elegant Fade In-Out - Hide all elements until they Visible in the Viewport */
   .elementor-widget:not(.disable-fade-in) {
       opacity: 0;
       transition-property: opacity,transform;
       transform: translate3d(0,34px,0);
       transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
       transition-duration: .5s;
   }
   /* Elegant Fade In-Out - Show */
   .elementor-widget.show,
   .e-preview--show-hidden-elements .elementor-widget,
   .elementor-editor-active .elementor-widget{
       opacity: 1;
       transform: none;
   }
   

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

3. שמרו הכל ופיתחו את האתר מחוץ לאלמנטור. תוכלו לראות שאלמנטים מופעים בעדינות בעת הגלילה.
4. יש וידג'ט שלא תרצו שהאפקט יופעל עליו? הוסיפו לו את הקלאס disable-fade-in (מתקדם > מתקדם > CSS Classes). שווה להגדיר כך וידג'טים עם שטח גדול, או תמונה גדולה, וכמובן וידאו – כל רכיב שהרינדור שלו בדפדפן יכול להיות מקרטע. אלמנטים נוספים שתרצו לבטל בהם את אנימציית הכניסה הגלובלית הם רכיבים שיש להם אנימציה יחודית משל עצמם, כזו שמוגדרת דרך אפקטי תנועה, או אנימציית לוטי, למשל.
5. בפשטות, הקוד הזה מסתיר את כל האלמנטים על המסך (עד שהמשתמש גולל) וזה עצמו פוטנציאל לבעיות. בדקתי את הקוד היטב על עמודים מסוגים שונים, עם וידג'טים שונים וגם בפופאפים, אבל אני לא יכול לטעון שניסיתי אותו בכל מצב ועם כל תוסף אפשרי. אם כעת או בעתיד עצמים שמופיעים בעורך של אלמנטור לא יופיעו לכם בחזית האתר יש לבטל את הקוד ולאבחן את מקור הבעיה.

אנימציה מדורגת

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

1. הוסיפו את הקוד הבא מיד אחרי ה-CSS שכבר הכנסתם בשלב הקודם:

   
   /* Elegant Fade In-Out - Elements delay */
   .transition-delay-1 {
       transition-delay: .2s;
   }
   .transition-delay-2 {
        transition-delay: .4s;
   }
   .transition-delay-3 {
        transition-delay: .6s;
   }
   .transition-delay-4 {
        transition-delay: .8s;
   }
   

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

   
   /* Elegant Fade In-Out - Elements delay */
   @media (min-width: 768px) {
       .transition-delay-1 {
          transition-delay: .2s;
       }
       .transition-delay-2 {
          transition-delay: .4s;
       }
       .transition-delay-3 {
           transition-delay: .6s;
       }
       .transition-delay-4 {
           transition-delay: .8s;
       }
   }
   

התאמה אישית של סגנון האנימציה

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

• אם תרצו לשנות את משך הזמן של האפקט הגדילו או הקטינו את הערך של transition-duration (בכל גרסאותיו).
• אם תרצו לשנות את גודל התנועה, כך שהאפקט יהיה דומיננטי יותר, תוכלו להגדיל את הערך של translate3d כך שיהיה גדול יותר מ34 פיקסלים.
• אם תרצו שהתנועה תהיה אופקית ולא אנכית, הגדירו 0 בערך של Y ו 34px בערך של X.
• לשינוי ה-Offset שנו את הערך של המשתנה offset בסקריפט. אני הגדרתי אותו על 50 בדסקטופ ו-0 במובייל כיוון שבעיני זו נקודת פתיחה טובה. אתם מוזמנים לבחור ערכים אחרים.

אופטימיזציה לאתר: מניעת אנימציה עבור וידג'טים בראש הדף

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

Google PageSpeed (וגם שאר כלי הבדיקה מבוססי Lighthouse) שם דגש רב על האלמנטים שנמצאים בחלק העליון של הדף (Above the fold) מאחר ואלו הם האלמנטים הראשונים שהמשתמש רואה בעת פתיחת האתר. עיכוב בטעינתם עלול לגרום לתחושת איטיות ולפגוע בחוויית המשתמש. לכן, מומלץ להוסיף את הקלאס disable-fade-in לכל הווידג'טים הנמצאים בראש הדף – הוידג'טים שהמשתמש רואה לפני שהוא התחיל לגלול. כך ניתן לוודא שהאלמנטים יופיעו מיידית וללא העיכוב הקל שיוצרת האנימציה.

לקריאה נוספת

Motion Effects in Elementor Academy

CSS translate3d() Function