{"id":28501400,"url":"https://github.com/masterjaneza/horizontal-scroll-gallery---v3","last_synced_at":"2026-04-17T04:33:37.289Z","repository":{"id":295008408,"uuid":"988784329","full_name":"masterjaneza/Horizontal-Scroll-Gallery---V3","owner":"masterjaneza","description":"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.","archived":false,"fork":false,"pushed_at":"2025-06-03T10:35:18.000Z","size":124,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-28T20:40:34.568Z","etag":null,"topics":["attractive-ui","css-animations","css3","cssanimations","html5","js","lineargradient","modern","modern-colors","modern-ui","modernui","scroll","scrolling","v3","vanilla-js","vanillajs"],"latest_commit_sha":null,"homepage":"https://horizontal-scroll-gallery-v3.vercel.app","language":"HTML","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-23T04:28:02.000Z","updated_at":"2025-06-03T10:35:20.000Z","dependencies_parsed_at":null,"dependency_job_id":"f3a9346d-f7a0-4d3a-b030-a9473b1bbae4","html_url":"https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V3","commit_stats":null,"previous_names":["masterjaneza/horizontal-scroll-gallery---v3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/masterjaneza/Horizontal-Scroll-Gallery---V3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/masterjaneza","download_url":"https://codeload.github.com/masterjaneza/Horizontal-Scroll-Gallery---V3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/masterjaneza%2FHorizontal-Scroll-Gallery---V3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31915282,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","css-animations","css3","cssanimations","html5","js","lineargradient","modern","modern-colors","modern-ui","modernui","scroll","scrolling","v3","vanilla-js","vanillajs"],"created_at":"2025-06-08T15:40:15.816Z","updated_at":"2026-04-17T04:33:37.284Z","avatar_url":"https://github.com/masterjaneza.png","language":"HTML","readme":"# Horizontal Scroll Gallery | V3\n\nA 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.\n\nStill light. Still library-free. Just HTML, CSS, and a sprinkle of JavaScript.\n\n---\n\n## 🔧 Improvements from V2\n\n- 🎨 **Modernized Visual Design** — Clean gradients replace flat colors, giving each image card more depth and elegance.\n- 🌀 **Smoother Scroll Feel** — Enhanced scroll handling with improved performance and better fluidity on touch and desktop.\n- 📱 **Improved Mobile Experience** — Optimized for swiping and smaller screens with cleaner spacing and touch-friendly layout.\n- ⚙️ **Cleaner Codebase** — Refactored CSS for readability and easier customization.\n- 💡 **Ready for Expansion** — Layout and components are structured for quick styling and animation upgrades.\n\n---\n\n## 🎯 Purpose\n\nThis project continues the mission of exploring horizontal scrolling in a simple but visually interesting way. It's ideal for:\n\n- Portfolios\n- Product galleries\n- Landing pages\n- Interactive timelines or image-based storytelling\n\nThink of it as a horizontally scrolling canvas you can turn into anything — minimal and light, but expandable and elegant.\n\n---\n\n## 🚀 What It Does\n\n- Displays a gallery of image cards that scroll horizontally.\n- Enables vertical mouse wheel to trigger horizontal scroll.\n- Smooth and responsive behavior on both desktop and mobile.\n- Supports touch gestures natively — no libraries required.\n\n---\n\n## 🧠 How It Works\n\n- A container element uses `display: flex` with `overflow-x: auto`.\n- JavaScript listens for vertical wheel events and translates them into horizontal scroll.\n- Smooth scroll behavior is enabled for fluid motion.\n- Images are styled with padding, shadows, and modern CSS enhancements.\n\n---\n\n## 🖼️ Design Notes\n\nThis version finally begins to look like something you'd put in production — or at least a proper portfolio draft.\n\nImprovements include:\n- Subtle **box-shadows** and **gradient backgrounds** for each image card\n- Scrolling that feels less mechanical and more polished\n- Layout padding for better breathing room\n\nYou can extend the design further by:\n- Adding scroll snapping (`scroll-snap-type`)\n- Animating image hover or focus states\n- Embedding titles, captions, or overlays\n- Using `IntersectionObserver` for lazy loading or animation triggers\n\n---\n\n## 🧪 Browser Support\n\nFully functional in all modern browsers.  \nTested on:\n- Chrome\n- Firefox\n- Safari\n- Edge\n\n⚠️ Older browsers might have issues with smooth scrolling or gradient rendering.\n\n---\n\n## 📌 Known Limitations\n\n- No scroll snapping yet (but it’s easy to add).\n- Scrollbar is visible by default — can be styled or hidden.\n- No built-in accessibility for keyboard navigation (yet).\n\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---V1.git\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\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\nFor best visuals, use in light mode.  \nSome gradients or shadows may appear dull in dark mode.\n\n---\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterjaneza%2Fhorizontal-scroll-gallery---v3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasterjaneza%2Fhorizontal-scroll-gallery---v3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterjaneza%2Fhorizontal-scroll-gallery---v3/lists"}