> ## 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.
# Installation
> Install Jarallax using npm, yarn, pnpm, or CDN for instant parallax scrolling effects
# 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:
```bash npm theme={null}
npm install jarallax
```
```bash yarn theme={null}
yarn add jarallax
```
```bash pnpm theme={null}
pnpm add jarallax
```
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:
```javascript theme={null}
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:
```typescript theme={null}
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:
```html theme={null}
```
### UMD via CDN
For traditional script tag usage with global variables:
```html theme={null}
```
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:
```html theme={null}
```
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:
Download from [npm](https://www.npmjs.com/package/jarallax) or [GitHub releases](https://github.com/nk-o/jarallax/releases)
Copy files from the `dist/` directory to your project:
* `jarallax.min.js` or `jarallax.esm.min.js`
* `jarallax.min.css`
* `jarallax-video.min.js` (optional, for video backgrounds)
```html theme={null}
```
## Verify Installation
To verify Jarallax is installed correctly, check the version:
```javascript ES Module theme={null}
import { jarallax } from 'jarallax';
console.log('Jarallax loaded:', typeof jarallax === 'function');
```
```javascript UMD theme={null}
console.log('Jarallax loaded:', typeof window.jarallax === 'function');
```
```javascript jQuery theme={null}
console.log('jQuery plugin loaded:', typeof $.fn.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
Learn how to create your first parallax effect with Jarallax
