`. The specified selector must match an ancestor of the image, and the `.simpleParallax` class with `overflow: hidden` is automatically applied.
```javascript
import SimpleParallax from "simple-parallax-js/vanilla";
// HTML:
const images = document.querySelectorAll(".card__img");
new SimpleParallax(images, {
scale: 1.4,
customWrapper: ".card", // reuses .card as the clipping wrapper
});
// Result: .card gets class="simpleParallax card" style="overflow:hidden"
```
--------------------------------
### React Usage with Next.js Image Component
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Integrate simpleParallax.js with the Next.js Image component for optimized image loading and parallax effects. Ensure the Image component is passed as a child to SimpleParallax.
```tsx
import Image from "next/image";
import SimpleParallax from "simple-parallax-js";
const NextExample = () => (
);
```
--------------------------------
### Basic React Usage: SimpleParallax Component
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Use the SimpleParallax component to wrap an image for basic upward parallax scrolling. No manual ref is needed as the component clones its child.
```tsx
import React from "react";
import SimpleParallax from "simple-parallax-js";
// Basic usage — image moves upward as the user scrolls down
const BasicExample = () => (
);
```
--------------------------------
### Advanced React Usage: Full SimpleParallax Configuration
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Configure all available props for the SimpleParallax component to customize the parallax effect. This includes orientation, scale, delay, transition, and overflow behavior.
```tsx
import React from "react";
import SimpleParallax from "simple-parallax-js";
// All props explicitly set
const FullExample = () => (
1); higher = more pronounced effect
delay={0.6} // seconds of CSS transition lag after scroll stops
transition="ease-in-out" // CSS easing for the delay transition
overflow={false} // false = clip overflow with hidden wrapper; true = allow bleed
maxTransition={75} // cap parallax at 75% of the full animation range
>
);
```
--------------------------------
### Use customContainer Option for Scrollable Ancestors
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Redirect scroll calculations to a specific scrollable ancestor using the `customContainer` option. This is useful when parallax images are within an overflow-scrolling container, not the main page body.
```javascript
import SimpleParallax from "simple-parallax-js/vanilla";
// Images inside a scrollable modal/sidebar
const container = document.querySelector(".scrollable-panel");
const images = container.querySelectorAll("img");
const parallax = new SimpleParallax(images, {
orientation: "up",
scale: 1.3,
customContainer: container, // pass the Node directly, or a CSS selector string
});
```
--------------------------------
### customWrapper Option
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
The `customWrapper` option allows you to use an existing element as the overflow wrapper, preventing the library from injecting a new `div`. The specified selector must match an ancestor of the image.
```APIDOC
## `customWrapper` Option
### Description
Uses an existing element as the overflow wrapper instead of injecting a new `
`.
### Parameters
- **customWrapper**: (string) - A CSS selector for the existing element to use as the overflow wrapper. The `.simpleParallax` class and `overflow: hidden` will be added to this element.
```
--------------------------------
### Destroy Parallax Instance to Clean Up
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Use `instance.destroy()` to completely remove the parallax effect. This removes inline styles, unwraps injected wrapper elements, disconnects observers, and cancels the animation loop if no instances remain.
```javascript
import SimpleParallax from "simple-parallax-js/vanilla";
const images = document.querySelectorAll("img.parallax");
const instance = new SimpleParallax(images, { scale: 1.4, delay: 0.3 });
// Destroy when navigating away (e.g., SPA route change)
function cleanup() {
instance.destroy();
// All inline styles removed, wrapper divs unwrapped,
// rAF loop cancelled if this was the last instance.
}
document.querySelector("#nav-link").addEventListener("click", cleanup);
```
--------------------------------
### TypeScript Interface for SimpleParallax Props
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Defines the TypeScript types for all configuration options available for the SimpleParallax React component. This includes defaults for delay, orientation, scale, overflow, transition, and maxTransition.
```ts
import { SimpleParallaxProps, Orientation } from "simple-parallax-js";
// Full type definition (from src/react/types/index.ts):
// type Orientation =
// | "up" | "right" | "down" | "left"
// | "up left" | "up right" | "down left" | "down right";
// interface SimpleParallaxProps {
// delay?: number; // default: 0.4 (seconds)
// orientation?: Orientation; // default: "up"
// scale?: number; // default: 1.4
// overflow?: boolean; // default: false
// transition?: string; // default: "cubic-bezier(0,0,0,1)"
// maxTransition?: number | null; // default: null (no cap)
// children?: React.ReactNode;
// }
```
--------------------------------
### instance.destroy()
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Completely removes the parallax instance, including inline styles, unwrapping elements, and disconnecting observers. The shared requestAnimationFrame loop is cancelled if no instances remain.
```APIDOC
## `instance.destroy()`
### Description
Tears down the parallax instance, removing styles, unwrapping elements, and cancelling associated listeners and loops.
### Usage
Call this method on an existing SimpleParallax instance to completely remove its effects and cleanup resources.
```
--------------------------------
### customContainer Option
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Use the `customContainer` option to specify a different scrollable ancestor for parallax calculations, useful for elements within modals or sidebars.
```APIDOC
## `customContainer` Option
### Description
Redirects scroll calculations to a specific scrollable ancestor instead of the `window`.
### Parameters
- **customContainer**: (DOM element or string) - The ancestor element to use for scroll calculations.
```
--------------------------------
### Destroy SimpleParallax Instance
Source: https://github.com/geosigno/simpleparallax.js/blob/master/README.md
Remove the parallax effect and clean up any added classes or styles by destroying the SimpleParallax instance. This is useful when you no longer need the parallax effect on the images.
```javascript
var images = document.querySelectorAll('img');
var instance = new SimpleParallax(images);
instance.destroy();
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.
![{"image"}]({"thumbnail.jpg"})
```
```javascript
const image = document.getElementsByClassName('thumbnail');
new SimpleParallax(image);
```
--------------------------------
### Prefers Reduced Motion Support (Vanilla JS)
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Automatically detects OS-level reduced-motion preference. If enabled, parallax animations are skipped. No configuration is required.
```javascript
import SimpleParallax from "simple-parallax-js/vanilla";
const instance = new SimpleParallax(document.querySelectorAll("img"), {
scale: 1.3,
});
// instance is silently inactive for reduced-motion users.
```
--------------------------------
### instance.refresh()
Source: https://context7.com/geosigno/simpleparallax.js/llms.txt
Recalculates all viewport positions and element offsets. This method should be called after dynamic content changes or programmatic scroll adjustments.
```APIDOC
## `instance.refresh()`
### Description
Recalculates element positions and offsets. Call this after dynamic content changes or layout adjustments.
### Usage
Call this method on an existing SimpleParallax instance to update its measurements.
```
--------------------------------
### Initialize and Refresh SimpleParallax Instance
Source: https://github.com/geosigno/simpleparallax.js/blob/master/README.md
Instantiate SimpleParallax on selected image elements and then call the refresh method to recalculate positions. The refresh method is automatically called on window resize.
```javascript
var images = document.querySelectorAll('img');
var instance = new SimpleParallax(images);
instance.refresh();
```
--------------------------------
### Configure simpleParallax settings in React
Source: https://github.com/geosigno/simpleparallax.js/blob/master/README.md
Pass configuration options as props to the SimpleParallax component in React to customize the parallax effect. Options include delay, orientation, scale, overflow, and maxTransition.
```javascript
import SimpleParallax from "simple-parallax-js";
const Component = () => (
