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.
- ๐จ 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.
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.
- 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.
- Utilizes
display: flexwithoverflow-x: scrollfor horizontal layout. - JavaScript listens for
wheelevents to control horizontal scrolling. - Navigation buttons allow manual scroll control.
- CSS
scroll-behavior: smoothenables smooth scrolling transitions. - Responsive design achieved through media queries and flexible sizing.
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
IntersectionObserverfor triggering animations on scroll.
Fully compatible with modern browsers:
- โ Chrome
- โ Firefox
- โ Safari
- โ Edge
- โ Arc
- โ Brave
โ ๏ธ Older browsers may not supportscroll-behavior: smoothor modern CSS features.
- 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.
- Clone the repository
git clone [https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5](https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5)
Open the Project:
- Open
index.htmlin your browser
or - Use Live Server in VS Code.
This project is open source โ use it, fork it, tweak it, remix it.
Just give credit where itโs due. โ๏ธ
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.
Designed & developed by
Davit Janezashvili
aka MasterJaneza โ Creative Developer & Designer
๐ฑ For best visuals, use in light mode.
Some gradients or shadows may appear dull in dark mode.
๐ แฐแแ แแแแแขแแแฃแ แ แกแฅแ แแแแก แแแแแ แแ | แแแ แกแแ 5
แแแ แกแแ 5 โ แแแฎแฃแแ แแแแแแแขแ แฐแแ แแแแแขแแแฃแ แ แแแแแ แแแก แแแแแฃแชแแแจแ. แแฎแแ แแก แแฆแแ แแ แแก แฃแแ แแแแ แแแแแ แแ โ แแก แแ แแก แจแแกแ แฃแแแแแก แแแแแแกแขแ แแชแแ, แแแแแแแแก แแ UX-แแก แแแแแ. แฃแคแ แ แแแแแแแขแฃแ แ, แแแแแแฃแ แแแแ แแแขแแแแแแแฃแแ แแ แขแแฅแแแแฃแ แแ แแแฎแแแฌแแแ.
- ๐ฑ แแแแแแฃแ แแแแ แแ แแแแขแแ แแแฃแแ แแแแแแแ โ แกแ แฃแแแ แแแแแคแแกแแแฃแแ แแแแแฃแขแ แแชแแ แ แแแ แแแแแแกแแแแก. แแแขแแ แคแแแกแ แฐแแ แแแแแฃแแแ แแ แแแแ แแแแแ แกแฅแ แแแก.
- ๐ง แฃแคแ แ แกแฃแคแแ แแ แแแแแแแขแฃแ แ 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 โ แแ แแแขแแฃแแ แแแแแแแแแ แ แแ แแแแแแแแ แ
๐ฑ แกแแฃแแแแแกแ แแแแฃแแแฃแ แ แแคแแฅแขแแแแกแแแแก แแแแแแงแแแแ แฆแแ แ แแแแแ.
แแแแแแ แแ แแ แแแแแแขแ แแ แฉแ แแแแ แจแแกแแซแแแ แแแแแแแแ แแคแแฅแขแฃแ แแ แแแแแฉแแแแก แแฃแฅ แ แแแแแจแ.