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

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

GSAP / Java Script

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

יש לשים את הקוד הנבחר בתוך ווידגט html מתחת לתוכן או באלמנטור ניהול קודים תחת body end

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

<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script>
<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>
[safe_code_display]

אם אתם כבר במוד למידה, קבלו הדרכות שוות נוספות:

gsap (56)
GSAP / Java Script

אנימציית תמונה נחשפת בגלילה + גלילה צידית

gsap (52)
שיווק ועסקי

תרגולילה #8 – עבודה מול לקוחות פרימיום

gsap (46)
אפקטי CSS

תרגולילה #7 – אנימציות ב-CSS והשקת סדנאות הספיישל

gsap (27) (1)
פיתוח

תרגולילה #6 – 12 שיטות לפיתוח מושלם