🚀 Super Parallax JS

Lightweight (under 2kb), high-performance JavaScript library for creating parallax effects. Uses Intersection Observer API and hardware acceleration (GPU) to ensure buttery smooth performance even on mobile devices.

📦 View on npm

✨ Key Features

• 🏎️ Performance: Animations based on requestAnimationFrame and translate3d.
• 🔋 Smart: Activates only when elements are visible on screen (Intersection Observer).
• 🔌 Zero dependencies: No jQuery or other libraries required.
• 🛠️ Simplicity: Works automatically on elements with .parallax class.

📦 Installation

Using npm:

npm install @maxsoft/super-parallax

Or via yarn:

yarn add @maxsoft/super-parallax

🚀 Quick Start

1. Prepare HTML

Add the parallax class to elements you want to animate. For best results, make sure the image is slightly larger than its container.

<div class="container">
  <img src="image.jpg" class="parallax" alt="Mountains">
</div>

2. Initialize in JS

ES Module (Recommended)

import Parallax from '@maxsoft/super-parallax';

const prlx = new Parallax({
  speed: 0.3
});

CommonJS

const Parallax = require('@maxsoft/super-parallax');

const prlx = new Parallax({
  speed: 0.3
});

Browser (Script Tag)

<script src="node_modules/@maxsoft/super-parallax/index.js"></script>
<script>
  const prlx = new Parallax({
    speed: 0.3
  });
</script>

⚙️ Configuration (Options)

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | speed | Number | 0.2 | Movement speed (from -1.0 to 1.0). Higher values mean stronger effect. |

🎨 CSS Tips

To make the effect look professional, it's worth giving the image container overflow: hidden, and the image itself will-change: transform:

.container {
  overflow: hidden;
  height: 500px;
}

.parallax {
  width: 100%;
  height: 120%; /* Slightly larger to allow movement */
  object-fit: cover;
  will-change: transform;
}

📝 Examples

Check out the example/ directory for a complete working demo with HTML, CSS, and JavaScript.

You can also see a live demo by opening example/index.html in your browser.

🧪 Testing

Run tests with:

npm test

📄 License

Project released under MIT license.