masterjaneza/Horizontal-Scroll-Gallery---V3
V3 is the latest iteration of the Horizontal Scroll Gallery project, emphasizing enhanced design aesthetics, improved performance, and a more engaging user experience. Building upon the foundations laid in V2, this version introduces refined animations, a modern color palette, and optimized responsiveness.
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: flexwithoverflow-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
IntersectionObserverfor lazy loading or animation triggers
🧪 Browser Support
Fully functional in all modern browsers.
Tested on:
- Chrome
- Firefox
- Safari
- Edge
📌 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
- Clone the repository
git clone https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V1.git
Open the Project:
- Open
index.htmlin 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.