Parallax scrolling for modern browsers. Supported <img> tags, background images, YouTube, Vimeo and Self-Hosted Videos.

• WordPress Plugin
• Quick Start
• Import Jarallax
• Add styles
• Prepare HTML
• Run Jarallax
• Background Video Usage Examples
• Options
• Events
• Methods
• For Developers
• Real Usage Examples
• Credits

We made WordPress plugin to easily add backgrounds for content in your blog with all Jarallax features.

Demo: https://wpbackgrounds.com/

Download: https://wordpress.org/plugins/advanced-backgrounds/

There are a set of examples, which you can use as a starting point with Jarallax.

• ES Modules
• JavaScript
• Next.js
• Next.js Advanced Usage
• HTML
• jQuery

Use one of the following examples to import jarallax.

We provide a version of Jarallax built as ESM (jarallax.esm.js and jarallax.esm.min.js) which allows you to use Jarallax as a module in your browser, if your targeted browsers support it.

<script type="module">
  import { jarallax, jarallaxVideo } from "jarallax.esm.min.js";

  // Optional video extension
  jarallaxVideo();
</script>

<script type="module">
  import { jarallax, jarallaxVideo } from "https://cdn.skypack.dev/[email protected]?min";

  // Optional video extension
  jarallaxVideo();
</script>

Jarallax may be also used in a traditional way by including script in HTML and using library by accessing window.jarallax.

<script src="jarallax.min.js"></script>

<!-- Optional video extension -->
<script src="jarallax-video.min.js"></script>

<script src="https://unpkg.com/[email protected]"></script>

<!-- Optional video extension -->
<script src="https://unpkg.com/[email protected]/dist/jarallax-video.min.js"></script>

Install Jarallax as a Node.js module using npm

npm install jarallax

Import Jarallax by adding this line to your app's entry point (usually index.js or app.js):

import { jarallax, jarallaxVideo } from "jarallax";

// Optional video extension
jarallaxVideo();

These styles required to set proper background image position before Jarallax script initialized:

.jarallax {
  position: relative;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

You can include it from /dist/jarallax.css.

<!-- Background Image Parallax -->
<div class="jarallax">
  <img class="jarallax-img" src="<background_image_url_here>" alt="">
  Your content here...
</div>

<!-- Background Image Parallax with <picture> tag -->
<div class="jarallax">
  <picture class="jarallax-img">
    <source media="..." srcset="<alternative_background_image_url_here>">
    <img src="<background_image_url_here>" alt="">
  </picture>
  Your content here...
</div>

<!-- Alternate: Background Image Parallax -->
<div class="jarallax" style="background-image: url('<background_image_url_here>');">
  Your content here...
</div>

Note: automatic data-attribute initialization and jQuery integration are available in UMD mode only.

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

<div data-jarallax data-speed="0.2" class="jarallax">
  <img class="jarallax-img" src="<background_image_url_here>" alt="">
  Your content here...
</div>

Note: You can use all available options as data attributes. For example: data-speed, data-img-src, data-img-size, etc...

$('.jarallax').jarallax({
  speed: 0.2,
});

Sometimes to prevent existing namespace collisions you may call .noConflict on the script to revert the value of.

const jarallaxPlugin = $.fn.jarallax.noConflict() // return $.fn.jarallax to previously assigned value
$.fn.newJarallax = jarallaxPlugin // give $().newJarallax the Jarallax functionality

import { jarallax, jarallaxVideo } from 'jarallax';
jarallaxVideo();

jarallax(document.querySelectorAll('.jarallax'), {
  speed: 0.2,
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});

<div class="jarallax"></div>

<!-- Background YouTube Parallax -->
<div class="jarallax" data-jarallax data-video-src="https://www.youtube.com/watch?v=ab0TSkLe-E0">
  Your content here...
</div>

<!-- Background Vimeo Parallax -->
<div class="jarallax" data-jarallax data-video-src="https://vimeo.com/110138539">
  Your content here...
</div>

<!-- Background Self-Hosted Video Parallax -->
<div class="jarallax" data-jarallax data-video-src="mp4:./video/local-video.mp4,webm:./video/local-video.webm,ogv:./video/local-video.ogv">
  Your content here...
</div>

Note: self-hosted videos require 1 video type only, not necessarily using all mp4, webm, and ogv. This is only needed for maximum compatibility with all browsers.

Options can be passed in data attributes or in object when you initialize jarallax from script.

You can disable parallax effect and/or video background on mobile devices using option disableParallax and/or disableVideo.

Example:

jarallax(document.querySelectorAll('.jarallax'), {
  disableParallax: /iPad|iPhone|iPod|Android/,
  disableVideo: /iPad|iPhone|iPod|Android/
});

Or using function. Example:

jarallax(document.querySelectorAll('.jarallax'), {
  disableParallax: function () {
    return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
  },
  disableVideo: function () {
    return /iPad|iPhone|iPod|Android/.test(navigator.userAgent);
  }
});

Required jarallax/jarallax-video.js file.

Events used the same way as Options.

Required jarallax/jarallax-video.js file.

jarallax(document.querySelectorAll('.jarallax'), {
  onScroll: function(calculations) {
    console.log(calculations);
  }
});

Console Result:

{
  // parallax section client rect (top, left, width, height)
  rect            : object,

  // see image below for more info
  beforeTop       : float,
  beforeTopEnd    : float,
  afterTop        : float,
  beforeBottom    : float,
  beforeBottomEnd : float,
  afterBottom     : float,

  // percent of visible part of section (from 0 to 1)
  visiblePercent  : float,

  // percent of block position relative to center of viewport from -1 to 1
  fromViewportCenter: float
}

Calculations example:

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

$('.jarallax').jarallax('destroy');

• Run npm install in the command line

• npm run dev to run build and start local server with files watcher
• npm run build to run build

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors

• npm run test to run unit tests

• AWB
• Godlike
• Youplay
• Skylith
• Khaki

• Images https://unsplash.com/
• Videos https://videos.pexels.com/