גלילה עם אפקט של עיוות – למה זה טוב ואיך עושים את זה?

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

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

הדגמה מונפשת - עיוות של הדף בעת גלילה

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

הקוד במדריך הזה נכתב על בסיס הקוד של Codegrid. התאמתי אותו לאלמנטור, אבל אם תרצו להשתמש בו עבור אתר שפותח בצורה אחרת פשוט שנו את elementor-section-wrap לקלאס הרלוונטי לכם.

הוסיפו את הסקריפט הבא (באמצעות enqueue לקובץ JS או טעינה להוק wp_footer או עם פיצ'ר Custom code של אלמנטור):


<script>
	var scrollWrap = document.getElementsByClassName("site-main")[0];
	if (!scrollWrap) {
		scrollWrap = document.getElementsByClassName("elementor-section-wrap")[0];
	}
			
       const body = document.body,
            height = scrollWrap.getBoundingClientRect().height - 1,
            speed = 0.04;

            var offset = 0;

            body.style.height = Math.floor(height) + "px";

            function smoothScroll() {
                offset += (window.pageYOffset - offset) * speed;

                var scroll = "translateY(-" + offset + "px) translateZ(0)";
                scrollWrap.style.transform = scroll;

                callScroll = requestAnimationFrame(smoothScroll);
            }

            smoothScroll();
		
            let currentPos = window.pageYOffset;

            const callDistort = function () {
                const newPos = window.pageYOffset;
                const diff = newPos - currentPos;
                const speed = diff * 0.15;

                scrollWrap.style.transform = "skewY(" + speed + "deg)";
                currentPos = newPos;
                requestAnimationFrame(callDistort);
            };

            callDistort();
	</script>

שמרו הכל ופיתחו את האתר מחוץ לאלמנטור. תוכלו לראות שכל הדף מתעוות בעת הגלילה.

מה הקוד הזה עושה?

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

החלק השני של הקוד מגדיר skewY לאלמנט העוטף של הדף, ומשנה את הערך שלו עם דעיכה לפי מהירות הגלילה (הערך של speed הולך וקטן).

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

במדריך זה הראיתי כיצד ליצור עיוות רגעי של הדף בעת הגלילה. אם תרצו לשנות את עוצמת האפקט הגדילו או הקטינו את הערך של הגורם בקבוע speed (כלומר – החליפו את השורה const speed = diff * 0.15; בconst speed = diff * 0.30;  או const speed = diff * 0.20; ).

שיתוף  

הרשמה לקבלת עדכונים

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

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

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

דילוג לתוכן