https://github.com/masterjaneza/horizontal-scroll-gallery---v1
A simple horizontal scrolling image gallery built with HTML, CSS, and a touch of JavaScript. Designed to showcase images in a side-scrolling layout, it offers a clean, responsive experience with no heavy libraries, just pure, functional code. Perfect for portfolios, showcases, or experimental layouts.
https://github.com/masterjaneza/horizontal-scroll-gallery---v1
css-animations css3 html5 js linear-gradient lineargradient modern modern-colors modern-ui scroll scrolling v1 vanilla-javascript
Last synced: 7 days ago
JSON representation
A simple horizontal scrolling image gallery built with HTML, CSS, and a touch of JavaScript. Designed to showcase images in a side-scrolling layout, it offers a clean, responsive experience with no heavy libraries, just pure, functional code. Perfect for portfolios, showcases, or experimental layouts.
- Host: GitHub
- URL: https://github.com/masterjaneza/horizontal-scroll-gallery---v1
- Owner: masterjaneza
- Created: 2025-05-21T06:19:19.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-06-02T06:08:17.000Z (11 months ago)
- Last Synced: 2025-06-02T16:37:59.012Z (11 months ago)
- Topics: css-animations, css3, html5, js, linear-gradient, lineargradient, modern, modern-colors, modern-ui, scroll, scrolling, v1, vanilla-javascript
- Language: CSS
- Homepage: https://horizontal-scroll-gallery-v1.vercel.app
- Size: 125 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Horizontal Scroll Gallery | V1
A clean, lightweight gallery with a twist — instead of the usual vertical scroll, this project goes sideways. Built with pure HTML, CSS, and a bit of JavaScript, this gallery presents images in a horizontal scrolling container, offering an elegant, unconventional browsing experience.
This is *Version 1*, so expect a raw, functional base with room to grow. No unnecessary libraries, no bloated code — just the essentials.
---
## 🎯 Purpose
The goal of this project is to explore horizontal scrolling in a simple, focused way. It’s great for image portfolios, product showcases, or creative landing pages where a horizontal layout adds uniqueness.
Whether you're learning how to manipulate scroll behavior, building something minimal, or experimenting with a design-forward interface, this project gives you a solid foundation.
---
## 🚀 What It Does
- Displays a series of images inside a horizontally scrollable container.
- Allows scrolling using the mouse wheel (on desktops) or swipe gestures (on touch devices).
- Uses native browser scrolling with smooth behavior.
- Fully responsive, so it adapts to different screen sizes and orientations.
---
## 🧠 How It Works
- The gallery is a flex container with overflow-x: scroll, causing items to line up horizontally and scroll along the X-axis.
- JavaScript is optionally used to enhance scroll behavior (e.g., allowing vertical wheel gestures to scroll horizontally).
- CSS keeps the layout clean and smooth, using flexbox and minimal styling.
---
---
## 🖼️ Design Notes
V1 is minimal and functional — think of it as a skeleton for bigger ideas.
- The current design is basic and intentionally unstyled.
- You can easily extend it by:
- Adding image hover effects
- Using CSS grid or scroll snapping
- Styling the scrollbar or hiding it for aesthetics
- Embedding captions or overlay info
*Modern design and polish are coming in future versions.*
---
---
## ⚙️ Setup & Installation
1. **Clone the repository**
```bash
git clone https://github.com/masterjaneza/Horizontal-Scroll-Gallery---V1.git
**Open the Project:**
- Open `index.html` in your browser
**or**
- Use **Live Server** in VS Code.
---
---
## 🧪 Browser Support
This project works in all modern browsers. Some enhancements (like smooth scrolling or scroll snapping) may have minor inconsistencies in older browsers, but the core functionality holds.
---
## 📌 Known Limitations
- No scroll snapping yet (but it's on the roadmap).
- Not optimized for keyboard navigation.
- No image lazy loading in this version.
---
## 🧪 License
Feel free to use, modify, or remix this project. No pressure.
Just give credit where credit’s due - sharing is caring. 😉
---
## 🌟 Support the Project
If this helped you or made you smile, hit that ⭐ on GitHub, fork it, remix it, and tag me in your own creations. Let’s build scroll magic together.
---
## ✍️ Credits
Crafted with pixels and passion by
*Davit Janezashvili*
aka MasterJaneza – Creative Developer & Designer
---
## ⚠️ Note
If you're using dark mode, some visuals might not look as intended. For the best experience, switch to light mode.
---