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

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

				
					.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>
				
			
				
					 @media screen and(min-width: 767px) {
        .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>
if(screen.width <= 767){
    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>
				
			

21 תגובות

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

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

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

    1. איך אני יכולה לעשות שזה יהיה גלילה לצד ימין ולא לצד שמאל?
      התוכן שלי באנגלית(אם הדיירקשן הוא על LTR בכלל זה לא עובד כמו שברכי פילץ כתבה)
      אשמח לתשובה, תודה!

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

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

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

כתיבת תגובה

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

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