> ## 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.
# Vanilla JavaScript
> Learn how to use Jarallax with vanilla JavaScript in various module formats
Jarallax provides multiple ways to initialize parallax effects using vanilla JavaScript, supporting both modern ESM imports and traditional UMD script tags.
## Installation
Install Jarallax via npm:
```bash theme={null}
npm install jarallax
```
Or use a CDN for quick prototyping:
```html theme={null}
```
## Initialization Methods
Jarallax supports three initialization patterns in vanilla JavaScript:
Use ES Modules for modern JavaScript applications with bundlers or native browser support.
```javascript theme={null}
import { jarallax, jarallaxVideo } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';
// Optional: Enable video extension
jarallaxVideo();
// Initialize parallax
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2
});
```
The video extension is optional and only needed if you want to use YouTube, Vimeo, or self-hosted video backgrounds.
Use traditional script tags for simple HTML pages without a build process.
```html theme={null}
```
Use data attributes for automatic initialization without JavaScript code.
```html theme={null}
```
Data attribute initialization only works with the UMD build. All options can be set as data attributes using the `data-` prefix.
## Complete Examples
### ESM with CDN
Here's a complete working example using ES Modules from a CDN:
```html theme={null}
Jarallax ESM Example
```
### UMD with Script Tags
This example uses traditional script tags for maximum browser compatibility:
```html theme={null}
Jarallax JavaScript Example
```
### Data Attribute Initialization
Use data attributes for zero-JavaScript initialization:
```html theme={null}
Jarallax HTML Example
```
## HTML Structure
Jarallax requires specific HTML structure for the parallax effect to work:
```html Image Tag (Recommended) theme={null}
```
```html Picture Tag (Responsive) theme={null}
```
```html Inline Background theme={null}
```
Using the `` tag with the `jarallax-img` class is recommended for better SEO and accessibility.
## Configuration Options
Customize the parallax effect with these options:
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
// Parallax type: scroll, scale, opacity, scroll-opacity, scale-opacity
type: 'scroll',
// Parallax speed (-1.0 to 2.0)
speed: 0.5,
// Image source (overrides background)
imgSrc: 'path/to/image.jpg',
// Image size (CSS background-size or object-fit)
imgSize: 'cover',
// Image position (CSS background-position or object-position)
imgPosition: '50% 50%',
// z-index of parallax container
zIndex: -100,
// Disable on specific devices
disableParallax: /iPad|iPhone|iPod|Android/,
// Video options (requires jarallax-video extension)
videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
videoStartTime: 0,
videoEndTime: 0,
videoLoop: true
});
```
## Methods
Control parallax instances programmatically:
```javascript theme={null}
// Destroy parallax
jarallax(document.querySelectorAll('.jarallax'), 'destroy');
// Check if element is visible
jarallax(document.querySelectorAll('.jarallax'), 'isVisible');
// Recalculate on resize
jarallax(document.querySelectorAll('.jarallax'), 'onResize');
// Recalculate on scroll
jarallax(document.querySelectorAll('.jarallax'), 'onScroll');
```
## Events
Listen to parallax events for custom behaviors:
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
onScroll: function(calculations) {
console.log('Scroll calculations:', calculations);
},
onInit: function() {
console.log('Parallax initialized');
},
onDestroy: function() {
console.log('Parallax destroyed');
},
onCoverImage: function() {
console.log('Image covered');
}
});
```
## Video Backgrounds
Jarallax supports YouTube, Vimeo, and self-hosted video backgrounds:
```javascript JavaScript Initialization theme={null}
import { jarallax, jarallaxVideo } from 'jarallax';
// Enable video extension
jarallaxVideo();
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2,
videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0'
});
```
```html Data Attribute (YouTube) theme={null}
Your content here...
```
```html Data Attribute (Vimeo) theme={null}
Your content here...
```
```html Data Attribute (Self-Hosted) theme={null}
Your content here...
```
Self-hosted videos should include at least one format (mp4, webm, or ogv) for browser compatibility.
## Browser Support
Jarallax works in all modern browsers:
* Chrome (latest)
* Firefox (latest)
* Safari (latest)
* Edge (latest)
* Opera (latest)
For older browsers, the UMD build provides the best compatibility. ESM requires browsers with native ES6 module support.
## Next Steps
Learn how to integrate Jarallax with React and Next.js applications
Use Jarallax with jQuery for enhanced compatibility
Explore all available methods and options
Discover advanced configuration and customization options
