Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ClaytonSeager/InifinityScroll/llms.txt

Use this file to discover all available pages before exploring further.

Infinity Scroll is a lightweight, vanilla JavaScript image gallery that automatically loads new photos as you scroll — no frameworks, no build tools, just HTML, CSS, and JavaScript working with the Unsplash API.

Quickstart

Get the gallery running in your browser in under five minutes

Configuration

Set your Unsplash API key and tune the image count per fetch

Features

Explore infinite scroll, search, and UI components in depth

JavaScript API

Full reference for every function and constant in Infinity.js

What it does

Infinity Scroll connects to the Unsplash API to fetch high-quality photographs and render them into a clean, single-column gallery. As the user approaches the bottom of the page, the next batch of images is automatically fetched and appended — creating a seamless, endless browsing experience. A built-in search bar lets visitors query specific topics. Typing a keyword and pressing Enter (or clicking the search button) replaces the current gallery with results matching that term, and infinite scroll continues working for subsequent result pages.
1

Get an Unsplash API key

Sign up at unsplash.com/developers and create a new application to receive your Access Key.
2

Clone the repository

git clone https://github.com/ClaytonSeager/InifinityScroll.git
cd InifinityScroll
3

Set your API key

Open Infinity.js and replace the placeholder value of the KEY constant with your Unsplash Access Key.
4

Open the gallery

Open index.html in any modern browser — or run npm start to launch a local dev server with live reload.

Key features

Infinite Scroll

New images load automatically when you near the bottom of the page — no pagination, no buttons

Keyword Search

Search the entire Unsplash library by topic and get results with the same smooth infinite scroll

Live Image Counter

A sticky header badge counts every image loaded in the current session in real time

Responsive Layout

Full-width gallery on mobile, centered column on desktop — adapts automatically to any screen size

Smooth Animations

The header collapses as you scroll and a scroll-to-top button fades in after one viewport of scrolling

Zero Dependencies

Pure HTML, CSS, and JavaScript — no frameworks, no bundler required to run the gallery

Build docs developers (and LLMs) love