Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nk-o/jarallax/llms.txt

Use this file to discover all available pages before exploring further.

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