Basic Usage

Learn how to implement basic parallax effects with Jarallax using images and backgrounds

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

npm install jarallax

Import Methods

Choose the import method that best fits your project setup.

ES Modules (Bundlers)

import { jarallax } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';

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

ESM CDN

<!-- Jarallax CSS -->
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">

<!-- Jarallax JS -->
<script type="module">
  import { jarallax } from "https://cdn.jsdelivr.net/npm/jarallax@2/+esm";
  
  jarallax(document.querySelectorAll('.jarallax'), {
    speed: 0.2
  });
</script>

UMD (Browser)

<!-- Jarallax CSS -->
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">

<!-- 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>

jQuery

<!-- Jarallax CSS -->
<link href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css" rel="stylesheet">

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Jarallax JS -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>

<script>
  $('.jarallax').jarallax({
    speed: 0.2
  });
</script>

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:

Inline Style

<div class="jarallax" style="background-image: url('path/to/image.jpg');">
  Your content here...
</div>

jarallax(document.querySelectorAll('.jarallax'));

imgSrc Option

<div class="jarallax">
  Your content here...
</div>

jarallax(document.querySelectorAll('.jarallax'), {
  imgSrc: 'path/to/image.jpg'
});

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

speed

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
});

imgPosition

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'

imgSize

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%'

imgRepeat

Controls image repetition (for background images only).

jarallax(document.querySelectorAll('.jarallax'), {
  imgRepeat: 'no-repeat' // Default
});

Options: 'no-repeat', 'repeat', 'repeat-x', 'repeat-y'

keepImg

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.

zIndex

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