astro-scroll-background-position

An Astro component that animates the background position interactively as the user scrolls.

Installation 📖

# You can intall with npm
npm install astro-scroll-background-position
# or with yarn
yarn add astro-scroll-background-position
# or with pnpm
pnpm add astro-scroll-background-position

Usage ⚙️

---
import AstroScrollBackgroundPosition from 'astro-scroll-background-position';
const NUM_OF_IMAGES = 6;
const arrayOfImages = Array.from({ length: NUM_OF_IMAGES }, (_, i) => {
  return `https://20essentials.github.io/project-1281/assets/w${i + 1}.avif`;
});
---

<AstroScrollBackgroundPosition arrayOfImages={arrayOfImages} />

Demo 📹