SuperParallax Demo

🚀 What is SuperParallax?

SuperParallax is a lightweight JavaScript library that creates stunning multi-layer parallax effects combining both scroll and mouse movement tracking.

It's inspired by classic 2D video games where different layers move at different speeds to create an illusion of depth.

What you just saw: 5 layers moving at different speeds!

• Layer 1 (Purple 🌙) moves slowest (0.2x depth)
• Layer 5 (Green ✨) moves fastest (1.3x depth)

The higher the depth value, the faster the layer moves, creating the illusion that it's closer to you!

📦 Installation

npm install github:Reyemneirda/super-parallax

Or include it directly in your HTML:

<script src="path/to/super-parallax.js"></script>

💻 Basic Usage

          // Initialize SuperParallax

            const parallax = new SuperParallax('.parallax-container', {

              scrollMultiplier: 1,

              mouseMultiplier: 0.5,

              smoothing: 0.1

            });

Then add the data attributes to your HTML elements:

          <div data-parallax-layer data-parallax-depth="0.5">

              Your content here

            </div>

⚙️ Options

scrollMultiplier: Controls the intensity of scroll effects (default: 1)

mouseMultiplier: Controls the intensity of mouse effects (default: 0.5)

smoothing: How smooth the animation is, 0-1 (default: 0.1)

centerMouse: Center mouse coordinates (default: true)

resetOnMouseLeave: Reset position when mouse leaves (default: true)

Pro Tip: Lower depth values move slower (background), higher values move faster (foreground). Try values between 0.1 and 1.5 for best results!