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 — მეხუთე ელემენტი ჰორიზონტალური გალერეის ევოლუციაში. ახლა ეს აღარ არის უბრალოდ გალერეა — ეს არის შესრულების დემონსტრაცია, დიზაინის და 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 – კრეატიული დეველოპერი და დიზაინერი
📱 საუკეთესო ვიზუალური ეფექტებისთვის გამოიყენეთ ღია რეჟიმი.
ზოგიერთი გრადიენტი ან ჩრდილი შესაძლოა ნაკლებად ეფექტურად გამოჩნდეს მუქ რეჟიმში.