איך ליצור גלילה רוחבית באתר עם אלמנטור

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

				
					.my-hs{
	width: 400% !important;
	max-width: 400% !important;
	transition: 0s !important;
}

html, body {
	overflow-x: hidden;
}
				
			
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>


<script>
    gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".my-hs-con");

gsap.to(sections, {
  xPercent: 100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".my-hs",
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".my-hs").offsetWidth
  }
});



</script>
				
			

4 תגובות

  1. ואואוו
    ממש תודה!!!!
    זה עוזר לי מאוד!!!
    רק שאלה עם אני רוצה שיהיה לי גלילה אין סופית איך אני עושה את זה??
    שזה יגלל לי כל הזמן?

  2. הי!
    זו הדרכה סופר מועילה ושימושית
    רציתי לדעת פעלתי בדיוק לפי ההוראות, אבל הגלילה לרוחב לא עובדת לי
    מה יכול להיות?

כתיבת תגובה

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

פעם בשבוע אני שולח ניוזלטר
עם כל המאמרים החדשים באתר
מעניין אותך?