Skip to main content
Jarallax provides multiple ways to create parallax scrolling effects. This guide covers the fundamentals of setting up image parallax effects.

​
Installation

First, install Jarallax in your project: 
npm install jarallax

​
Import Methods

Choose the import method that best fits your project setup. 
import { jarallax } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';

// Initialize on your elements
jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2
});

​
Using the jarallax-img Class

The most flexible way to add parallax images is using the jarallax-img class on an <img> element.
1

Add HTML Structure

Create a container with the jarallax class and an image with the jarallax-img class:
<div class="jarallax">
  <img class="jarallax-img" src="path/to/image.jpg" alt="">
  Your content here...
</div>
The jarallax-img class is the default selector (defined in imgElement option). You can customize this selector if needed.
2

Initialize Jarallax

Initialize Jarallax on your elements:
jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.5
});
3

Add Custom Styles

Style your parallax container as needed:
.jarallax {
  position: relative;
  min-height: 500px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
Using <img> tags with the jarallax-img class allows better SEO and accessibility compared to CSS background images.

​
Using Picture Elements

For responsive images with different sources, use the <picture> element: 
<div class="jarallax">
  <picture class="jarallax-img">
    <source media="(max-width: 768px)" srcset="path/to/mobile-image.jpg">
    <source media="(max-width: 1200px)" srcset="path/to/tablet-image.jpg">
    <img src="path/to/desktop-image.jpg" alt="">
  </picture>
  Your content here...
</div>

​
Background Image Method

You can also use CSS background images for simpler setups: 
<div class="jarallax" style="background-image: url('path/to/image.jpg');">
  Your content here...
</div>

jarallax(document.querySelectorAll('.jarallax'));
When using CSS background images, the image won’t be visible to screen readers or search engines. Use the jarallax-img class method for better accessibility.

​
Data Attribute Initialization

In UMD mode, Jarallax supports automatic initialization via data attributes: 
<div class="jarallax" data-jarallax data-speed="0.2">
  <img class="jarallax-img" src="path/to/image.jpg" alt="">
  Your content here...
</div>
The data-jarallax attribute triggers automatic initialization. All options can be set as data attributes using the data- prefix (e.g., data-speed, data-img-src, data-type).

​
Common Configuration Options

Controls the parallax effect speed. Accepts values from -1.0 to 2.0.
  • 0.5 (default): Standard parallax effect
  • 1.0: No parallax (moves with scroll)
  • 0: Background is fixed
  • Negative values: Parallax in reverse direction
jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2 // Slower parallax effect
});
Sets the image position using CSS background-position or object-position values.
jarallax(document.querySelectorAll('.jarallax'), {
  imgPosition: '50% 50%' // Default: center
});
Examples: 'top center', '20% 80%', 'left bottom'
Sets the image size using CSS background-size or object-fit values.
jarallax(document.querySelectorAll('.jarallax'), {
  imgSize: 'cover' // Default
});
Options: 'cover', 'contain', 'auto', '100% 100%'
Controls image repetition (for background images only).
jarallax(document.querySelectorAll('.jarallax'), {
  imgRepeat: 'no-repeat' // Default
});
Options: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'
Keep the <img> tag in its default place after initialization.
jarallax(document.querySelectorAll('.jarallax'), {
  keepImg: false // Default: false
});
When true, Jarallax clones the image instead of moving it.
Sets the z-index of the parallax container.
jarallax(document.querySelectorAll('.jarallax'), {
  zIndex: -100 // Default
});

​
Complete Example

Here’s a complete working example: 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jarallax Example</title>
    
    <!-- Jarallax CSS -->
    <link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">
    
    <style>
      .jarallax {
        position: relative;
        min-height: 600px;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
      }
    </style>
  </head>
  <body>
    <div class="jarallax">
      <img class="jarallax-img" src="https://jarallax.nkdev.info/images/image1.jpg" alt="">
      <h1>Parallax Effect</h1>
    </div>

    <!-- Jarallax JS -->
    <script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
    
    <script>
      jarallax(document.querySelectorAll('.jarallax'), {
        speed: 0.2
      });
    </script>
  </body>
</html>

​
jQuery No Conflict

If you’re using jQuery and need to prevent namespace collisions: 
const jarallaxPlugin = $.fn.jarallax.noConflict();
$.fn.newJarallax = jarallaxPlugin;

// Now use with the new name
$('.jarallax').newJarallax({
  speed: 0.2
});

​
Next Steps

Video Backgrounds

Learn how to use YouTube, Vimeo, and self-hosted videos

Advanced Options

Explore different parallax types and mobile optimization

Build docs developers (and LLMs) love

Get started for freeTalk to us