Installation
Jarallax can be installed and used in multiple ways depending on your project setup. Choose the method that best fits your workflow.
Package Manager Installation
Install Jarallax as a Node.js module using your preferred package manager:
The package includes TypeScript definitions, so no additional @types package is needed.
Import Methods
Once installed, you can import Jarallax using different module systems depending on your bundler and project setup.
ES Modules (Recommended)
For modern bundlers like Webpack, Rollup, or Vite:
import { jarallax, jarallaxVideo } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';
// Optional: Initialize video extension
jarallaxVideo();
// Use jarallax
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2,
});
The video extension (jarallaxVideo) is optional and only needed if you plan to use YouTube, Vimeo, or self-hosted video backgrounds.
TypeScript
Jarallax includes full TypeScript definitions:
import { jarallax, jarallaxVideo, JarallaxOptions } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';
jarallaxVideo();
const options: JarallaxOptions = {
type: 'scroll',
speed: 0.5,
imgPosition: '50% 50%',
};
jarallax(document.querySelectorAll('.jarallax'), options);
CDN Installation
For quick prototyping or projects without a build step, use a CDN.
ESM via CDN
Use ES modules directly in the browser:
<!DOCTYPE html>
<html>
<head>
<!-- Jarallax CSS -->
<link
href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Your parallax elements -->
<div class="jarallax">
<img class="jarallax-img" src="image.jpg" alt="" />
</div>
<!-- Jarallax JS -->
<script type="module">
import { jarallax, jarallaxVideo } from "https://cdn.jsdelivr.net/npm/jarallax@2/+esm";
// Optional video extension
jarallaxVideo();
// Initialize
jarallax(document.querySelectorAll(".jarallax"));
</script>
</body>
</html>
UMD via CDN
For traditional script tag usage with global variables:
<!DOCTYPE html>
<html>
<head>
<!-- Jarallax CSS -->
<link
href="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Your parallax elements -->
<div class="jarallax">
<img class="jarallax-img" src="image.jpg" alt="" />
</div>
<!-- Jarallax JS -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
<!-- Optional: Video extension -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax-video.min.js"></script>
<!-- Initialize -->
<script>
jarallax(document.querySelectorAll(".jarallax"));
</script>
</body>
</html>
When using UMD, jarallax is available as a global variable. Make sure to include the script before trying to use it.
jQuery Support (Optional)
If you’re using jQuery, Jarallax automatically adds a jQuery plugin interface when loaded in UMD mode:
<!-- jQuery (required for jQuery API) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- Jarallax -->
<script src="https://cdn.jsdelivr.net/npm/jarallax@2/dist/jarallax.min.js"></script>
<script>
// Use jQuery syntax
$('.jarallax').jarallax({
speed: 0.2,
});
</script>
jQuery is not required for Jarallax to work. The vanilla JavaScript API is recommended for modern projects.
Local Installation
You can also download and host Jarallax files locally:
Copy distribution files
Copy files from the dist/ directory to your project:
jarallax.min.js or jarallax.esm.min.jsjarallax.min.cssjarallax-video.min.js (optional, for video backgrounds)
Reference in your HTML
<link href="path/to/jarallax.min.css" rel="stylesheet" />
<script src="path/to/jarallax.min.js"></script>
Verify Installation
To verify Jarallax is installed correctly, check the version:
import { jarallax } from 'jarallax';
console.log('Jarallax loaded:', typeof jarallax === 'function');
What’s Included
The package includes:
- Core library: Parallax functionality for images
- Video extension: Support for YouTube, Vimeo, and local videos
- CSS styles: Required styles for proper positioning
- TypeScript definitions: Full type support
- Source maps: For debugging
Next Steps
Quick Start Guide
Learn how to create your first parallax effect with Jarallax
