https://github.com/masterjaneza/horizontal-scroll-gallery---v5
A lightweight, responsive, and fully interactive horizontal scroll gallery built with pure HTML, CSS, and modular JavaScript. Includes smooth scrolling and a refined UI. Ideal for portfolios, product showcases, and creative layouts.
https://github.com/masterjaneza/horizontal-scroll-gallery---v5
attractive-ui creative-frontend-project creative-scrolling css3 flexbox georgian horizontal-scrolling html5 image-gallery lightweight minimal-design modern-ui no-libraries product-showcase scroll-animations scroll-based-interface scroll-behavior v5 vanilla-js web-animation
Last synced: 3 months ago
JSON representation
A lightweight, responsive, and fully interactive horizontal scroll gallery built with pure HTML, CSS, and modular JavaScript. Includes smooth scrolling and a refined UI. Ideal for portfolios, product showcases, and creative layouts.
- Host: GitHub
- URL: https://github.com/masterjaneza/horizontal-scroll-gallery---v5
- Owner: masterjaneza
- Created: 2025-05-25T02:49:51.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-06-01T16:30:17.000Z (4 months ago)
- Last Synced: 2025-06-02T01:59:50.440Z (4 months ago)
- Topics: attractive-ui, creative-frontend-project, creative-scrolling, css3, flexbox, georgian, horizontal-scrolling, html5, image-gallery, lightweight, minimal-design, modern-ui, no-libraries, product-showcase, scroll-animations, scroll-based-interface, scroll-behavior, v5, vanilla-js, web-animation
- Language: CSS
- Homepage: https://horizontal-scroll-gallery-v5.vercel.app
- Size: 137 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# For Georgian Scroll Downโฌ๏ธ
# ๐ Horizontal Scroll Gallery | V5
Version 5 marks a significant leap forward in the evolution of the Horizontal Scroll Gallery.
Building upon the solid foundation of V4, this iteration introduces enhanced visual dynamics,
refined user interactions, and a more modular codebase. The gallery now offers a more immersive
and seamless experience, making it an ideal choice for portfolios, product showcases,
and creative presentations.
Still lightweight. Still no external libraries.
Just pure HTML, CSS, and modular, vanilla JavaScript.
---
## ๐ง Improvements from V4
- ๐จ **Enhanced Visual Design** โ Introduced more sophisticated gradients and transitions, providing a richer visual experience.
- ๐งฉ **Modular Code Structure** โ Refactored JavaScript and CSS into more modular components, improving maintainability and scalability.
- ๐ฑ๏ธ **Refined Scroll Behavior** โ Optimized scroll interactions for smoother and more responsive navigation across devices.
- ๐ฑ **Improved Responsiveness** โ Enhanced layout adjustments for various screen sizes, ensuring consistent presentation on all devices.
- ๐งผ **Cleaner Codebase** โ Further organized files and implemented consistent naming conventions, facilitating easier collaboration and future development.
---
## ๐ฏ Purpose
V5 aims to elevate the user experience by integrating advanced visual elements and improving
interaction mechanisms. It's designed for developers and designers seeking a polished, responsive,
and customizable horizontal gallery solution.
---
## ๐ What It Does
- Displays a collection of images in a horizontally scrollable container.
- Incorporates smooth scrolling and transition effects for a fluid user experience.
- Adapts seamlessly to various screen sizes and input methods.
- Offers an enhanced visual design with refined gradients and spacing.
---
## ๐ง How It Works
- Utilizes `display: flex` with `overflow-x: scroll` for horizontal layout.
- JavaScript listens for `wheel` events to control horizontal scrolling.
- Navigation buttons allow manual scroll control.
- CSS `scroll-behavior: smooth` enables smooth scrolling transitions.
- Responsive design achieved through media queries and flexible sizing.
---
## ๐ผ๏ธ Design Notes
V5 introduces a more sophisticated aesthetic, enhancing the gallery's visual appeal:
- ๐ซ **Advanced Gradients** โ Implemented multi-layered gradients for depth and visual interest.
- ๐ **Optimized Spacing** โ Adjusted margins and padding for better content separation and balance.
- ๐ **Stylized Navigation Buttons** โ Redesigned buttons for improved usability and consistency with the overall design.
- ๐ **Theme Flexibility** โ Designed to accommodate both light and dark modes with minimal adjustments.
Potential enhancements for future versions:
- Integration of scroll snapping (`scroll-snap-type`) for precise navigation.
- Implementation of lazy loading for images to improve performance.
- Addition of hover and active state effects for interactive feedback.
- Inclusion of captions or overlays for contextual information.
- Utilization of `IntersectionObserver` for triggering animations on scroll.
---
## ๐งช Browser Support
Fully compatible with modern browsers:
- โ
Chrome
- โ
Firefox
- โ
Safari
- โ
Edge
- โ
Arc
- โ
Brave
> โ ๏ธ Older browsers may not support `scroll-behavior: smooth` or modern CSS features.
---
## ๐ Known Limitations
- Scroll snapping is not yet implemented.
- Scrollbar visibility may vary across browsers; customization may be required.
- Keyboard navigation support is not included in this version.
---
---
## โ๏ธ Setup & Installation
1. **Clone the repository**
```bash
git clone [https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5](https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5)
```
**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.
---
---
---
---
---
# ๐ แฐแแ แแแแแขแแแฃแ แ แกแฅแ แแแแก แแแแแ แแ | แแแ แกแแ 5
แแแ แกแแ 5 โ แแแฎแฃแแ แแแแแแแขแ แฐแแ แแแแแขแแแฃแ แ แแแแแ แแแก แแแแแฃแชแแแจแ. แแฎแแ แแก แแฆแแ แแ แแก แฃแแ แแแแ แแแแแ แแ โ แแก แแ แแก แจแแกแ แฃแแแแแก แแแแแแกแขแ แแชแแ, แแแแแแแแก แแ UX-แแก แแแแแ. แฃแคแ แ แแแแแแแขแฃแ แ, แแแแแแฃแ แแแแ แแแขแแแแแแแฃแแ แแ แขแแฅแแแแฃแ แแ แแแฎแแแฌแแแ.
---
## ๐ง แแแฃแแฏแแแแกแแแแแ V4-แแแ แจแแแแ แแแแ
- ๐ฑ **แแแแแแฃแ แแแแ แแ แแแแขแแ แแแฃแแ แแแแแแแ** โ แกแ แฃแแแ แแแแแคแแกแแแฃแแ แแแแแฃแขแ แแชแแ แ แแแ แแแแแแกแแแแก. แแแขแแ แคแแแกแ แฐแแ แแแแแฃแแแ แแ แแแแ แแแแแ แกแฅแ แแแก.
- ๐ง **แฃแคแ แ แกแฃแคแแ แแ แแแแแแแขแฃแ แ JavaScript แแแแแแ** โ แแแแ แแแแแ แขแแแแแฃแแแ, แแแคแฃแซแแแแฃแแแ แแแแฃแแฃแ แแแแแ แแ แแจแแแแแฃแแแ แฃแแแแแกแ UX-แแกแแแแก.
- ๐จ **แแแแแแแแแกแขแฃแ แ แแแแแแแแก แแแฎแแแฌแ** โ แแแแแแ แแ แจแแ แฉแแฃแแ แคแแ แแแ, แ แแแแ แฉแ แแแแแแ แแ แแแแแแแแ แแแ แขแแแแแ แแคแแ.
- ๐งผ **แแแแแก แแแแแ แฃแคแ แ แแแแ แกแแกแฃแคแแแแ** โ แแแกแฌแแ แแแฃแแ แกแขแ แฃแฅแขแฃแ แ, แแแฃแแฏแแแแกแแแฃแแ แแแแแแขแแ แแแ แแ แ แแกแฃแ แกแแแแก แฃแแแแแกแ แแแแแฏแแแแขแ.
- ๐ **แกแฌแ แแคแ แฉแแขแแแ แแแ แแ แฃแแแแแกแ แจแแกแ แฃแแแแ** โ CSS แแแขแแแแแแชแแ, แฃแแแแแกแ แแแแแ แฅแฃแแ แแกแแแ แแ แแแแแงแแแแแฃแแ แ แแกแฃแ แกแแแแก แแแแแแแแแแแชแแ.
---
## ๐ฏ แแแแแแ
แแแ แกแแ 5 แแจแแแแแฃแแแ แ แแแแ แช แกแฃแคแแ, UX-แแ แแ แแแแขแแ แแแฃแแ แฐแแ แแแแแขแแแฃแ แ แแแแแ แแแก แแแแแฌแงแแแขแ. แแแแแแฃแ แแ:
- แแแแแแแแ แแแ แแแ แขแคแแแแแกแแแแก
- แแ แแแฃแฅแขแแก แแแแแกแแแแก
- แแแขแแ แแฅแขแแฃแแ แชแแคแ แฃแแ แแฅแกแแแ แแแแแขแแแแกแแแแก
---
## ๐ แคแฃแแฅแชแแแแแแ
- แฐแแ แแแแแขแแแฃแ แแ แกแฅแ แแแแแแแ แแแแขแแแแแ แ
- แแแฃแแ แแแแแแชแแแแ แแ แแแ แแแแแแแแแ
- แแแแแแฃแ แแแแ แแแขแแแแแแชแแ
- แแแฃแแฏแแแแกแแแฃแแ แแแแแแแขแแแแก แแแ แแ แฅแแ แแ แกแขแแแแแแชแแ
---
## ๐ง แ แแแแ แแฃแจแแแแก
- Flexbox-แแก แกแขแ แฃแฅแขแฃแ แ `overflow-x: scroll` แแแ แแแแขแ แแ
- JavaScript แแแฃแจแแแแแก `wheel` แแ แฆแแแแแแก แแแแแแแแแก X-แฆแแ แซแแก แกแฅแ แแแแกแแแแก
- แแแ แแแแฃแแ แฆแแแแแแแ โ แแแ แชแฎแแแ/แแแ แฏแแแแ
- `scroll-behavior: smooth` แฌแงแแแขแก แฎแแกแข แกแฅแ แแแก
---
## ๐ผ๏ธ แแแแแแแแก แจแแแแจแแแแแ
- โจ แกแ แฃแแแ แแแ แแแฅแแแแแ แขแแแแแ แแคแแ แแ แคแแ แแแ
- ๐งญ แแแแแแแชแแแก แฆแแแแแแแ แแแแแแแแแกแขแฃแ แแ แแแแแแฃแจแแแแแฃแแ
- ๐ spacing แแ layout แฃแแแแแกแแ แแแแแแกแแ แแแฃแแ
- ๐ฑ แแแแแแฃแ แแแแ แแแแแงแแแแแ แแ แแฉแแแฃแแแแ แแแแ แ แแแแแ
---
## ๐งช แแ แแฃแแแ แแก แแฎแแ แแแญแแ แ
- โ
Chrome
- โ
Firefox
- โ
Safari
- โ
Edge
- โ
Brave
- โ
Arc
> โ ๏ธ `scroll-behavior: smooth` แแฎแแ แแแญแแ แ แแ แแ แแก แแแ แแแขแแ แแแฃแแ แซแแแ แแ แแฃแแแ แแแจแ.
---
## ๐ แชแแแแแแ แจแแแฆแฃแแแแแ
- Scroll snapping แฏแแ แแ แแ แแก แแแขแแแ แแ แแแฃแแ
- แแแแแแแขแฃแ แแก แแแแแแแชแแ แแ แแ แฉแแจแแแแแฃแแ
- แแ แ แแฅแแก dark mode (แแแแ แแ แแแแแแแ แแแกแแแแขแแแแแแ)
------
## ๐งช แแแชแแแแแ
แแ แแแฅแขแ แฆแแ แแแแแแแ โ แแแแแแงแแแแ, fork-แแ, แจแแชแแแแแ, แแแแแแแแแแ.
แฃแแ แแแแ แแแฃแแแแแ แแแขแแ แ, แ แแแแ แช แกแแญแแ แแ. โ๏ธ
---
## ๐ แแฎแแ แ แแแฃแญแแ แแ แแ แแแฅแขแก
แแฃ แแแแแฌแแแแ แแ แแแแแแแแแแ, แแแแญแแ แแ โญ GitHub-แแ.
แแแแคแแ แแแแ, แจแแชแแแแแ, แแแแแแแแแแ โ แแ แแแ แแฅแแแแ แฐแแ แแแแแขแแแฃแ แ แกแแ แแแแก แแแแแแก!
---
## โ๏ธ แแแขแแ แ
แแแแแแแแก แแ แแ แแแฅแขแแก แจแแแฅแแแแ:
**แแแแแ แฏแแแแแแจแแแแ**
_aka MasterJaneza โ แแ แแแขแแฃแแ แแแแแแแแแ แ แแ แแแแแแแแ แ_
---
## โ ๏ธ แจแแแแจแแแ
๐ฑ แกแแฃแแแแแกแ แแแแฃแแแฃแ แ แแคแแฅแขแแแแกแแแแก แแแแแแงแแแแ แฆแแ แ แแแแแ.
แแแแแแ แแ แแ แแแแแแขแ แแ แฉแ แแแแ แจแแกแแซแแแ แแแแแแแแ แแคแแฅแขแฃแ แแ แแแแแฉแแแแก แแฃแฅ แ แแแแแจแ.
---