https://github.com/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.
https://github.com/masterjaneza/horizontal-scroll-gallery---v3
attractive-ui css-animations css3 cssanimations html5 js lineargradient modern modern-colors modern-ui modernui scroll scrolling v3 vanilla-js vanillajs
Last synced: 10 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/masterjaneza/horizontal-scroll-gallery---v3
- Owner: masterjaneza
- Created: 2025-05-23T04:28:02.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-06-03T10:35:18.000Z (11 months ago)
- Last Synced: 2025-10-28T20:40:34.568Z (6 months ago)
- Topics: attractive-ui, css-animations, css3, cssanimations, html5, js, lineargradient, modern, modern-colors, modern-ui, modernui, scroll, scrolling, v3, vanilla-js, vanillajs
- Language: HTML
- Homepage: https://horizontal-scroll-gallery-v3.vercel.app
- Size: 121 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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**
```bash
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.
---