GSAP / Java Script

גלילה צידית באלמנטור ב-5 דקות עבודה

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

html
<style>
 .wrapper{
     overscroll-behavior: none !important;
     transition: all 0s !important;
 }   
 
@media(max-width:1025px){
    .scroll{
        overflow-x: scroll; /*הופך את הגלילה לקרוסלה במובייל, ניתן למחוק אם אין צורך*/
    }
}
    
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger);

  const container = document.querySelector(".scroll"); // הקלאס של הקונטיינר הפנימי
  const totalWidth = container.scrollWidth; 

  gsap.to(container, {
    x: () => (totalWidth - window.innerWidth), // במידה והאתר באנגלית ורוצים לשנות כיוון, להוסיף מינוס לפני הסוגריים
    ease: "none",
    scrollTrigger: {
      trigger: ".wrapper", // קלאס הקונטיינר החיצונית
      start: "top top",
      end: () => `+=${totalWidth*1}`, // לשינוי מהירות הגלילה החליפו את הספרה 1, מספר יותר גבוה יוצר אפקט איטי יותר
      scrub: true,
      pin: true,
      anticipatePin: 1,
      markers: false
    }
  });
});
</script>