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

במדריך זה אני מציג קוד שכתבתי כדי לגרום לכל האלמנטים באתר אלמנטור להופיע בהנפשה אלגנטית. אין יותר צורך להגדיר וידג'ט אחרי וידג'ט - One Ring to rule them all!

שיתוף ב facebook
שיתוף ב linkedin
שיתוף ב whatsapp
שיתוף ב email

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

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

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

הדגמה מונפשת - אנימציית כניסה

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

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

  1. הוסיפו את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):
    
    <script>
    jQuery(document).ready(function() {
        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;
        -webkit-transition-property: opacity,-webkit-transform;
        transition-property: opacity,-webkit-transform;
        transition-property: opacity,transform;
        transition-property: opacity,transform,-webkit-transform;
        -webkit-transform: translate3d(0,34px,0);
                transform: translate3d(0,34px,0);
        -webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
                transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);
        -webkit-transition-duration: .5s;
                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;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
    

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

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

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

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

  1. הוסיפו את הקוד הבא מיד אחרי ה-CSS שכבר הכנסתם בשלב הקודם:
    
    /* Elegant Fade In-Out - Elements delay */
    .transition-delay-1 {
        -webkit-transition-delay: .2s;
                transition-delay: .2s;
    }
    .transition-delay-2 {
        -webkit-transition-delay: .4s;
                transition-delay: .4s;
    }
    .transition-delay-3 {
        -webkit-transition-delay: .6s;
                transition-delay: .6s;
    }
    .transition-delay-4 {
        -webkit-transition-delay: .8s;
                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 {
        -webkit-transition-delay: .2s;
                transition-delay: .2s;
    }
    .transition-delay-2 {
        -webkit-transition-delay: .4s;
                transition-delay: .4s;
    }
    .transition-delay-3 {
        -webkit-transition-delay: .6s;
                transition-delay: .6s;
    }
    .transition-delay-4 {
        -webkit-transition-delay: .8s;
                transition-delay: .8s;
    }
    }
    

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

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

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

לקריאה נוספת

Motion Effects in Elementor Academy

CSS translate3d() Function

שיתוף   //

שיתוף ב facebook
שיתוף ב whatsapp
שיתוף ב linkedin
שיתוף ב email

עוד באותו נושא
//

נשמח לספק לחברה שלך פתרונות מקצועיים בהתאמה אישית.

אלחנן, מנהל הסטודיו, יחזור אליך בשעות הקרובות וישמח לשוחח איתך.

דילוג לתוכן