{"id":28501407,"url":"https://github.com/masterjaneza/horizontal-scroll-gallery---v5","last_synced_at":"2025-07-04T13:31:28.437Z","repository":{"id":295351342,"uuid":"989877000","full_name":"masterjaneza/Horizontal-Scroll-Gallery---V5","owner":"masterjaneza","description":"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.","archived":false,"fork":false,"pushed_at":"2025-06-01T16:30:17.000Z","size":140,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-02T01:59:50.440Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://horizontal-scroll-gallery-v5.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/masterjaneza.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-25T02:49:51.000Z","updated_at":"2025-06-01T16:30:20.000Z","dependencies_parsed_at":"2025-06-01T17:27:22.199Z","dependency_job_id":null,"html_url":"https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5","commit_stats":null,"previous_names":["masterjaneza/horizontal-scroll-gallery---v5"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masterjaneza","download_url":"https://codeload.github.com/masterjaneza/Horizontal-Scroll-Gallery---V5/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V5/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258736613,"owners_count":22749788,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-06-08T15:40:16.209Z","updated_at":"2025-07-04T13:31:28.431Z","avatar_url":"https://github.com/masterjaneza.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# For Georgian Scroll Down⬇️\n\n\n# 🌌 Horizontal Scroll Gallery | V5\n\nVersion 5 marks a significant leap forward in the evolution of the Horizontal Scroll Gallery.\nBuilding upon the solid foundation of V4, this iteration introduces enhanced visual dynamics,\nrefined user interactions, and a more modular codebase. The gallery now offers a more immersive\nand seamless experience, making it an ideal choice for portfolios, product showcases,\nand creative presentations.\n\nStill lightweight. Still no external libraries.  \nJust pure HTML, CSS, and modular, vanilla JavaScript.\n\n---\n\n## 🔧 Improvements from V4\n\n- 🎨 **Enhanced Visual Design** — Introduced more sophisticated gradients and transitions, providing a richer visual experience.\n- 🧩 **Modular Code Structure** — Refactored JavaScript and CSS into more modular components, improving maintainability and scalability.\n- 🖱️ **Refined Scroll Behavior** — Optimized scroll interactions for smoother and more responsive navigation across devices.\n- 📱 **Improved Responsiveness** — Enhanced layout adjustments for various screen sizes, ensuring consistent presentation on all devices.\n- 🧼 **Cleaner Codebase** — Further organized files and implemented consistent naming conventions, facilitating easier collaboration and future development.\n\n---\n\n## 🎯 Purpose\n\nV5 aims to elevate the user experience by integrating advanced visual elements and improving\ninteraction mechanisms. It's designed for developers and designers seeking a polished, responsive,\nand customizable horizontal gallery solution.\n\n---\n\n## 🚀 What It Does\n\n- Displays a collection of images in a horizontally scrollable container.\n- Incorporates smooth scrolling and transition effects for a fluid user experience.\n- Adapts seamlessly to various screen sizes and input methods.\n- Offers an enhanced visual design with refined gradients and spacing.\n\n---\n\n## 🧠 How It Works\n\n- Utilizes `display: flex` with `overflow-x: scroll` for horizontal layout.\n- JavaScript listens for `wheel` events to control horizontal scrolling.\n- Navigation buttons allow manual scroll control.\n- CSS `scroll-behavior: smooth` enables smooth scrolling transitions.\n- Responsive design achieved through media queries and flexible sizing.\n\n---\n\n## 🖼️ Design Notes\n\nV5 introduces a more sophisticated aesthetic, enhancing the gallery's visual appeal:\n\n- 💫 **Advanced Gradients** — Implemented multi-layered gradients for depth and visual interest.\n- 📐 **Optimized Spacing** — Adjusted margins and padding for better content separation and balance.\n- 🔘 **Stylized Navigation Buttons** — Redesigned buttons for improved usability and consistency with the overall design.\n- 🌓 **Theme Flexibility** — Designed to accommodate both light and dark modes with minimal adjustments.\n\nPotential enhancements for future versions:\n\n- Integration of scroll snapping (`scroll-snap-type`) for precise navigation.\n- Implementation of lazy loading for images to improve performance.\n- Addition of hover and active state effects for interactive feedback.\n- Inclusion of captions or overlays for contextual information.\n- Utilization of `IntersectionObserver` for triggering animations on scroll.\n\n---\n\n## 🧪 Browser Support\n\nFully compatible with modern browsers:\n\n- ✅ Chrome  \n- ✅ Firefox  \n- ✅ Safari  \n- ✅ Edge  \n- ✅ Arc  \n- ✅ Brave\n\n\u003e ⚠️ Older browsers may not support `scroll-behavior: smooth` or modern CSS features.\n\n---\n\n## 📌 Known Limitations\n\n- Scroll snapping is not yet implemented.\n- Scrollbar visibility may vary across browsers; customization may be required.\n- Keyboard navigation support is not included in this version.\n\n--- \n--- \n\n## ⚙️ Setup \u0026 Installation\n\n1. **Clone the repository**\n   ```bash\n   git clone [https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5](https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V5)\n   ```\n\n**Open the Project:**\n\n- Open `index.html` in your browser  \n  **or**\n- Use **Live Server** in VS Code.\n--- \n---\n\n## 🧪 License\n\nThis project is open source — use it, fork it, tweak it, remix it.  \nJust give credit where it’s due. ✌️\n\n---\n\n## 🌟 Support the Project\n\nIf you like this or find it useful, give it a ⭐ star on GitHub.  \nFork it, extend it, tag me — let’s inspire each other to scroll sideways in style.\n\n---\n\n## ✍️ Credits\n\nDesigned \u0026 developed by  \n**Davit Janezashvili**  \n_aka MasterJaneza – Creative Developer \u0026 Designer_\n\n---\n\n## ⚠️ Note\n\n📱 For best visuals, use in light mode.  \nSome gradients or shadows may appear dull in dark mode.\n\n--- \n---\n---\n---\n--- \n\n\n\n# 🌌  ჰორიზონტალური სქროლის გალერეა | ვერსია 5\n\nვერსია 5 — მეხუთე ელემენტი ჰორიზონტალური გალერეის ევოლუციაში. ახლა ეს აღარ არის უბრალოდ გალერეა — ეს არის შესრულების დემონსტრაცია, დიზაინის და UX-ის ზეიმი. უფრო ელეგანტური, მობილურებზე ოპტიმიზებული და ტექნიკურად დახვეწილი.\n\n---\n\n## 🔧 გაუმჯობესებები V4-თან შედარებით\n\n- 📱 **მობილურებზე ორიენტირებული დიზაინი** — სრულად გადაფასებული ლეიაუტი მცირე ეკრანებისთვის. ინტერფეისი ჰარმონიულად ერგება თითით სქროლს.\n- 🧠 **უფრო სუფთა და ელეგანტური JavaScript ლოგიკა** — კოდი გამარტივებულია, დაფუძნებულია მოდულურობაზე და აშენებულია უკეთესი UX-ისთვის.\n- 🎨 **მინიმალისტური დიზაინის დახვეწა** — მკვეთრად შერჩეული ფერები, რბილი ჩრდილები და თანამედროვე ტიპოგრაფია.\n- 🧼 **კოდის კიდევ უფრო დიდი სისუფთავე** — გასწორებული სტრუქტურა, გაუმჯობესებული კომენტარები და რესურსების უკეთესი მენეჯმენტი.\n- 🚀 **სწრაფი ჩატვირთვა და უკეთესი შესრულება** — CSS ოპტიმიზაცია, უკეთესი მედია ქუერისები და გამოყენებული რესურსების მინიმალიზაცია.\n\n---\n\n## 🎯 მიზანი\n\nვერსია 5 აშენებულია როგორც სუფთა, UX-ზე ორიენტირებული ჰორიზონტალური გალერეის გადაწყვეტა. იდეალურია:\n\n- თანამედროვე პორტფოლიოსთვის\n- პროდუქტის დემოსთვის\n- ინტერაქტიული ციფრული ექსპერიმენტებისთვის\n\n---\n\n## 🚀 ფუნქციონალი\n\n- ჰორიზონტალურად სქროლებადი კონტეინერი\n- გლუვი ანიმაციები და გარდამავლობა\n- მობილურებზე ოპტიმიზაცია\n- გაუმჯობესებული ელემენტების იერარქია და სტილიზაცია\n\n---\n\n## 🧠 როგორ მუშაობს\n\n- Flexbox-ის სტრუქტურა `overflow-x: scroll` პარამეტრით\n- JavaScript ამუშავებს `wheel` და ღილაკის მოვლენებს X-ღერძის სქროლისთვის\n- მორგებული ღილაკები — მარცხენა/მარჯვენა\n- `scroll-behavior: smooth` წყვეტს ხისტ სქროლს\n\n---\n\n## 🖼️ დიზაინის შენიშვნები\n\n- ✨ სრულად გარდაქმნილი ტიპოგრაფია და ფერები\n- 🧭 ნავიგაციის ღილაკები მინიმალისტურად გადამუშავებული\n- 📐 spacing და layout უკეთესად ბალანსირებული\n- 📱 მობილურებზე გამოყენება არაჩვეულებრივად რბილია\n\n---\n\n## 🧪 ბრაუზერის მხარდაჭერა\n\n- ✅ Chrome\n- ✅ Firefox\n- ✅ Safari\n- ✅ Edge\n- ✅ Brave\n- ✅ Arc\n\n\u003e ⚠️ `scroll-behavior: smooth` მხარდაჭერა არ არის გარანტირებული ძველ ბრაუზერებში.\n\n---\n\n## 📌 ცნობილი შეზღუდვები\n\n- Scroll snapping ჯერ არ არის ინტეგრირებული\n- კლავიატურის ნავიგაცია არაა ჩაშენებული\n- არა აქვს dark mode (მაგრამ ადვილად დასამატებელია)\n\n------\n\n## 🧪 ლიცენზია\n\nპროექტი ღია კოდითაა — გამოიყენეთ, fork-ით, შეცვალეთ, გადააკეთეთ.  \nუბრალოდ მიუთითეთ ავტორი, როგორც საჭიროა. ✌️\n\n---\n\n## 🌟 მხარი დაუჭირეთ პროექტს\n\nთუ მოგეწონათ ან გამოგადგათ, დააჭირეთ ⭐ GitHub-ზე.  \nგააფართოეთ, შეცვალეთ, დაგვათეგეთ — ერთად ვქმნით ჰორიზონტალური სკროლის მაგიას!\n\n---\n\n## ✍️ ავტორი\n\nდიზაინის და პროექტის შემქნელი:  \n**დავით ჯანეზაშვილი**  \n_aka MasterJaneza – კრეატიული დეველოპერი და დიზაინერი_\n\n---\n\n## ⚠️ შენიშვნა\n\n📱 საუკეთესო ვიზუალური ეფექტებისთვის გამოიყენეთ ღია რეჟიმი.  \nზოგიერთი გრადიენტი ან ჩრდილი შესაძლოა ნაკლებად ეფექტურად გამოჩნდეს მუქ რეჟიმში.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterjaneza%2Fhorizontal-scroll-gallery---v5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasterjaneza%2Fhorizontal-scroll-gallery---v5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterjaneza%2Fhorizontal-scroll-gallery---v5/lists"}