SkillAgentSearch skills...

Jarallax

Parallax scrolling for modern browsers

GenerateConvertImprove

Install / Use

/learn @nk-o/Jarallax
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

Jarallax <!-- omit in toc -->

jarallax.min.js jarallax-video.min.js

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

Online Demo <!-- omit in toc -->

Table of Contents <!-- omit in toc -->

WordPress Plugin

Advanced WordPress Backgrounds

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/

Quick Start

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

Import Jarallax

Use one of the following examples to import jarallax.

ESM

We ship self-hosted ESM bundles (dist/jarallax.esm.js and dist/jarallax.esm.min.js) for browsers that support ES modules.

<!-- Jarallax CSS -->
<link href="./node_modules/jarallax/dist/jarallax.min.css" rel="stylesheet">

<!-- Jarallax JS -->
<script type="module">
  import { jarallax, jarallaxVideo } from "./node_modules/jarallax/dist/jarallax.esm.js";

  // Optional video extension
  jarallaxVideo();

  jarallax(document.querySelectorAll('.jarallax'));
</script>

ESM CDN

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

<!-- Jarallax JS -->
<script type="module">
  import { jarallax, jarallaxVideo } from "https://cdn.jsdelivr.net/npm/jarallax@3/+esm";

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

UMD

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

<!-- Jarallax CSS -->
<link href="jarallax.min.css" rel="stylesheet">

<!-- Jarallax JS -->
<script src="jarallax.min.js"></script>

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

UMD CDN

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

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

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

Package Imports (Bundlers / Node)

Install Jarallax as a Node.js module using npm.

npm install jarallax

Use the package root in modern bundlers:

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

// Optional video extension
jarallaxVideo();

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

The package root is safe to import in SSR and Node toolchains, but Jarallax is still a frontend-only runtime and must only be initialized once a real browser DOM exists.

The CommonJS entry point remains available for older bundlers and browser-targeted build setups:

const { jarallax, jarallaxVideo } = require('jarallax');
require('jarallax/dist/jarallax.min.css');

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

In SSR frameworks such as React or Next.js, keep the import at module scope if you want, but call jarallax() only in a client-only lifecycle or behind a typeof window !== 'undefined' guard.

TypeScript

Generated declarations are published from dist/types, while typings/index.d.ts remains as a compatibility re-export.

import { jarallax, jarallaxVideo, type JarallaxOptions } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';

const options: JarallaxOptions = {
  speed: 0.2,
  videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
};

jarallaxVideo();
jarallax(document.querySelectorAll<HTMLElement>('.jarallax'), options);

React / Next.js

The jarallax/react subpath keeps imports SSR-safe while delaying all DOM work until useEffect runs on the client.

The built-in React components apply the required base Jarallax styles automatically, so you do not need to import jarallax.css manually when using Jarallax, JarallaxImage, or JarallaxVideo.

Component API:

'use client';

import {
  Jarallax,
  JarallaxImage,
  JarallaxVideo,
} from 'jarallax/react';

export function Hero() {
  return (
    <Jarallax className="hero" options={{ speed: 0.4 }}>
      <JarallaxImage
        src="https://jarallax.nkdev.info/images/image-1.jpg"
        alt=""
      />
      <h1>Jarallax React</h1>
    </Jarallax>
  );
}

export function VideoHero() {
  return (
    <JarallaxVideo
      className="hero"
      options={{ speed: 0.2 }}
      videoSrc="https://youtu.be/mru3Q5m4lkY"
    />
  );
}

Hook API for custom markup:

'use client';

import { useJarallax } from 'jarallax/react';

export function CustomMarkupHero() {
  const ref = useJarallax({
    options: {
      speed: 0.4,
    },
  });

  return (
    <section ref={ref} className="jarallax hero">
      <img
        className="jarallax-img"
        src="https://jarallax.nkdev.info/images/image-2.jpg"
        alt=""
      />
      <h2>Hook-based markup control</h2>
    </section>
  );
}

Video hook API:

'use client';

import { useJarallaxVideo } from 'jarallax/react';

export function CustomVideoHero() {
  const ref = useJarallaxVideo({
    options: {
      speed: 0.2,
    },
    videoSrc: 'https://youtu.be/mru3Q5m4lkY',
  });

  return <section ref={ref} className="jarallax hero" />;
}

useJarallax and useJarallaxVideo are part of the React API when you want full control over the rendered markup.

For Next.js App Router, keep these components in files marked with 'use client';. Server rendering only outputs regular HTML, and the parallax instance is created after hydration on the client.

Prepare HTML

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

Run Jarallax

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

A. JavaScript way

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

B. Data attribute way

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

C. jQuery way

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

No conflict (only if you use jQuery) <!-- omit in toc -->

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

Background Video Usage Examples

A. JavaScript way

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>

B. Data attribute way

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

nk-o

View profile

View on GitHub
GitHub Stars1.5k
CategoryContent
Updated12d ago
Forks216
nk-o/jarallax

Languages

TypeScript

Security Score

100/100

Audited on Mar 19, 2026

No findings