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 requires no build pipeline, no package bundler, and no back-end server. The only external dependency is a free Unsplash API key. Follow the steps below and you’ll have a working gallery open in your browser in minutes.
Prerequisites: You need a modern browser that supports ES2017+ (async/await, fetch) — Chrome, Firefox, Edge, or Safari all work. You also need a free Unsplash Developer account to obtain an API key. If you want to use the npm start live-server option, Node.js must be installed.
1

Clone the repository

Clone the project from GitHub and move into the project directory:
git clone https://github.com/ClaytonSeager/InifinityScroll.git && cd InifinityScroll
2

Get an Unsplash API key

Infinity Scroll fetches images directly from the Unsplash API, so you need your own Access Key:
  1. Go to https://unsplash.com/developers and sign in or create a free account.
  2. Click Your apps → New Application.
  3. Accept the API use guidelines, give your app a name and description, then click Create application.
  4. Scroll down to the Keys section and copy the Access Key.
The free Unsplash developer tier allows 50 requests per hour. At the default setting of 10 images per request, that is 500 images per hour before rate limiting kicks in.
3

Configure the API key

Open Infinity.js in any text editor. The configuration constants are at the very top of the file:
const count = 10;
const KEY = 'YOUR_UNSPLASH_ACCESS_KEY';
let query = '';
Replace the value of KEY with the Access Key you copied from the Unsplash dashboard:
const KEY = 'YOUR_ACCESS_KEY_HERE';
Save the file. You can also change count to control how many images are fetched per scroll batch (see Configuration for details).
4

Open the gallery

You have two options for launching the gallery:
# No installation needed — just open the file
open index.html        # macOS
start index.html       # Windows
xdg-open index.html    # Linux
The npm start script uses live-server, which is declared as the sole dependency in package.json. It opens http://127.0.0.1:8080 automatically and hot-reloads whenever you edit any project file — handy when experimenting with the configuration.

​
Verify it works

Once the gallery opens you should see the following sequence:
  1. Loader appears — A semi-transparent white overlay with a spinning SVG animation covers the full page while the first API request is in flight.
  2. 10 images render — As each image finishes loading, the live counter in the sticky header increments. Once all 10 images have loaded the loader overlay disappears and the gallery becomes scrollable.
  3. Scroll to fetch more — Scroll down toward the bottom of the page. When you are within 1000px of the page end the loader reappears briefly and another 10 images are appended below the existing ones. The counter continues to increment with each new image.
If the loader never disappears, double-check that your KEY value is correct and that you haven’t exceeded the Unsplash free-tier rate limit of 50 requests/hour.
Use the search bar below the header to filter images by keyword. Type any term (for example mountains or architecture) and press Enter or click the 🔍 button. The gallery will clear, reset the counter to zero, and start a fresh infinite-scroll feed using the Unsplash search endpoint for your query. Delete the search text and search again to return to the random photo feed.

Build docs developers (and LLMs) love

Get started for freeTalk to us