גלריית תמונות באלמנטור שאפשר לגרור!

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

GSAP / Java Script

לכל התמונות ניתן את הקלאס של .drag, ולקונטיינר שנרצה שיהיה גבולות הגזרה של הגרירה ניתן את הקלאס של .drag-wrapper.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Draggable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/InertiaPlugin.min.js"></script>


<script>
  gsap.registerPlugin(Draggable);

  Draggable.create(".drag", {
    type: "x,y",
    edgeResistance: 0.65,
    bounds: ".drag-wrapper",
    inertia: true
  });
</script>
[safe_code_display]

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

gsap (56)
GSAP / Java Script

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

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

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

gsap (46)
אפקטי CSS

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

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

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