Skip to main content

Smooth Parallax Scrolling for Modern Browsers

Create stunning parallax effects with images, videos, and inline elements. Support for YouTube, Vimeo, and self-hosted videos with zero dependencies.

Get StartedExplore API

Quick Start

Get up and running with Jarallax in just a few steps.

1

Install Jarallax

Install the package using your preferred package manager.
npm
npm install jarallax
yarn
yarn add jarallax
pnpm
pnpm add jarallax
2

Import and Initialize

Import Jarallax in your JavaScript file and initialize it on your elements.
import { jarallax } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';

jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2
});
3

Add HTML Markup

Add the appropriate HTML structure for your parallax elements.
<div class="jarallax">
  <img class="jarallax-img" src="path/to/image.jpg" alt="">
  Your content here...
</div>
4

Customize Options

Explore the full range of options to create your perfect parallax effect.

View All Options

Configure speed, type, images, videos, and more

Key Features

Everything you need to create stunning parallax effects.

Zero Dependencies

Pure JavaScript with no dependencies. jQuery support is optional.

Video Backgrounds

Support for YouTube, Vimeo, and self-hosted video backgrounds.

Multiple Effects

Choose from scroll, scale, opacity, and combined effect types.

TypeScript Ready

Complete TypeScript definitions included for type safety.

Framework Support

Works seamlessly with React, Next.js, Vue, and other frameworks.

Mobile Optimized

Configurable mobile device detection and fallback options.

Explore by Topic

Find detailed guides and examples for your use case.

Basic Usage Guide

Learn the fundamentals of creating parallax effects with images and background elements.

Read guide

Video Backgrounds

Create immersive parallax effects with YouTube, Vimeo, or self-hosted video backgrounds.

Read guide

Framework Examples

Real-world examples for vanilla JavaScript, React, Next.js, and jQuery projects.

View examples

Complete API Reference

Detailed documentation of all options, methods, events, and the video extension API.

Explore API

Resources & Community

Get help and stay connected with the Jarallax community.

GitHub Repository

Browse source code, report issues, and contribute to the project.

npm Package

View package details, version history, and download statistics.

Ready to Create Stunning Parallax Effects?

Get started with Jarallax today and bring your website to life with smooth, performant parallax scrolling.

Start Building

Build docs developers (and LLMs) love

Get started for freeTalk to us