Horizontal Scroll Gallery | V3

A smoother, sleeker, and more refined take on horizontal scrolling. Version 3 builds on the solid foundation of V2 but cranks up the visual appeal and user experience. With modern gradients, more fluid scrolling, and refined responsiveness, this gallery now feels like a real showcase — not just a prototype.

Still light. Still library-free. Just HTML, CSS, and a sprinkle of JavaScript.

---

🔧 Improvements from V2

• 🎨 Modernized Visual Design — Clean gradients replace flat colors, giving each image card more depth and elegance.
• 🌀 Smoother Scroll Feel — Enhanced scroll handling with improved performance and better fluidity on touch and desktop.
• 📱 Improved Mobile Experience — Optimized for swiping and smaller screens with cleaner spacing and touch-friendly layout.
• ⚙️ Cleaner Codebase — Refactored CSS for readability and easier customization.
• 💡 Ready for Expansion — Layout and components are structured for quick styling and animation upgrades.

---

🎯 Purpose

This project continues the mission of exploring horizontal scrolling in a simple but visually interesting way. It's ideal for:

• Portfolios
• Product galleries
• Landing pages
• Interactive timelines or image-based storytelling

Think of it as a horizontally scrolling canvas you can turn into anything — minimal and light, but expandable and elegant.

---

🚀 What It Does

• Displays a gallery of image cards that scroll horizontally.
• Enables vertical mouse wheel to trigger horizontal scroll.
• Smooth and responsive behavior on both desktop and mobile.
• Supports touch gestures natively — no libraries required.

---

🧠 How It Works

• A container element uses display: flex with overflow-x: auto.
• JavaScript listens for vertical wheel events and translates them into horizontal scroll.
• Smooth scroll behavior is enabled for fluid motion.
• Images are styled with padding, shadows, and modern CSS enhancements.

---

🖼️ Design Notes

This version finally begins to look like something you'd put in production — or at least a proper portfolio draft.

Improvements include:

• Subtle box-shadows and gradient backgrounds for each image card
• Scrolling that feels less mechanical and more polished
• Layout padding for better breathing room

You can extend the design further by:

• Adding scroll snapping (scroll-snap-type)
• Animating image hover or focus states
• Embedding titles, captions, or overlays
• Using IntersectionObserver for lazy loading or animation triggers

---

🧪 Browser Support

Fully functional in all modern browsers.
Tested on:

• Chrome
• Firefox
• Safari
• Edge

⚠️ Older browsers might have issues with smooth scrolling or gradient rendering.

---

📌 Known Limitations

• No scroll snapping yet (but it’s easy to add).
• Scrollbar is visible by default — can be styled or hidden.
• No built-in accessibility for keyboard navigation (yet).

---

---

⚙️ Setup & Installation

1. Clone the repository

   git clone https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V1.git
   

Open the Project:

• Open index.html in your browser
  or
• Use Live Server in VS Code.

---

---

🧪 License

This project is open source — use it, fork it, tweak it, remix it.
Just give credit where it’s due. ✌️

---

🌟 Support the Project

If you like this or find it useful, give it a ⭐ star on GitHub.
Fork it, extend it, tag me — let’s inspire each other to scroll sideways in style.

---

✍️ Credits

Designed & developed by
Davit Janezashvili
aka MasterJaneza – Creative Developer & Designer

---

⚠️ Note

For best visuals, use in light mode.
Some gradients or shadows may appear dull in dark mode.

---