> ## 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.
# jQuery Integration
> Use Jarallax parallax effects with jQuery for enhanced compatibility and ease of use
Jarallax provides seamless jQuery integration, allowing you to use familiar jQuery syntax for initializing and controlling parallax effects. This integration is perfect for projects already using jQuery or requiring legacy browser support.
## Installation
Jarallax's jQuery plugin is included in the UMD build. Include jQuery before Jarallax:
```html theme={null}
```
jQuery integration is only available with the UMD build. ESM builds do not include jQuery support.
## Basic Usage
Initialize Jarallax using jQuery selectors:
```javascript theme={null}
$('.jarallax').jarallax();
```
With custom options:
```javascript theme={null}
$('.jarallax').jarallax({
speed: 0.2,
type: 'scroll'
});
```
## Complete Example
Here's a full working example with jQuery:
```html theme={null}
Jarallax jQuery Example
jQuery Example
```
## jQuery Selectors
Use jQuery's powerful selectors to target specific elements:
```javascript Class Selector theme={null}
// Initialize all elements with .jarallax class
$('.jarallax').jarallax({
speed: 0.5
});
```
```javascript ID Selector theme={null}
// Initialize specific element by ID
$('#hero-parallax').jarallax({
speed: 0.3,
type: 'scale'
});
```
```javascript Attribute Selector theme={null}
// Initialize elements with data-parallax attribute
$('[data-parallax]').jarallax({
speed: 0.2
});
```
```javascript Multiple Selectors theme={null}
// Initialize multiple different selectors
$('.parallax-slow, .parallax-fast').jarallax({
speed: 0.5
});
```
## Configuration Options
Pass options as an object to customize the parallax effect:
```javascript theme={null}
$('.jarallax').jarallax({
// Parallax type: scroll, scale, opacity, scroll-opacity, scale-opacity
type: 'scroll',
// Parallax speed from -1.0 to 2.0
speed: 0.5,
// Custom image source
imgSrc: 'path/to/image.jpg',
// Image element selector
imgElement: '.jarallax-img',
// Image size (background-size or object-fit values)
imgSize: 'cover',
// Image position (background-position or object-position values)
imgPosition: '50% 50%',
// Image repeat
imgRepeat: 'no-repeat',
// Keep img tag in place
keepImg: false,
// z-index
zIndex: -100,
// Disable on mobile devices
disableParallax: /iPad|iPhone|iPod|Android/,
// Video options
videoSrc: null,
videoStartTime: 0,
videoEndTime: 0,
videoLoop: true,
videoPlayOnlyVisible: true,
videoLazyLoading: true,
// Event callbacks
onScroll: null,
onInit: null,
onDestroy: null,
onCoverImage: null
});
```
## Methods
Call methods on existing Jarallax instances using jQuery:
Remove parallax effect and restore original state:
```javascript theme={null}
$('.jarallax').jarallax('destroy');
```
Check if parallax element is visible in viewport:
```javascript theme={null}
const isVisible = $('.jarallax').jarallax('isVisible');
console.log(isVisible);
```
Manually trigger resize calculation:
```javascript theme={null}
$('.jarallax').jarallax('onResize');
```
Manually trigger scroll calculation:
```javascript theme={null}
$('.jarallax').jarallax('onScroll');
```
## Event Handling
Attach event handlers when initializing or after initialization:
Pass event handlers as options:
```javascript theme={null}
$('.jarallax').jarallax({
speed: 0.5,
onInit: function() {
console.log('Jarallax initialized on', this);
},
onDestroy: function() {
console.log('Jarallax destroyed on', this);
},
onCoverImage: function() {
console.log('Image covered on', this);
}
});
```
Monitor scroll calculations:
```javascript theme={null}
$('.jarallax').jarallax({
onScroll: function(calculations) {
console.log('Visible percent:', calculations.visiblePercent);
console.log('From viewport center:', calculations.fromViewportCenter);
// Custom behavior based on scroll position
if (calculations.visiblePercent > 0.5) {
$(this).addClass('more-visible');
} else {
$(this).removeClass('more-visible');
}
}
});
```
Use jQuery's event system for additional functionality:
```javascript theme={null}
$('.jarallax')
.jarallax({
speed: 0.5,
onInit: function() {
$(this).trigger('jarallax.ready');
}
})
.on('jarallax.ready', function() {
console.log('Custom ready event fired');
});
```
## No Conflict Mode
Prevent namespace collisions when using multiple jQuery plugins:
```javascript theme={null}
// Save jarallax to a different namespace
const jarallaxPlugin = $.fn.jarallax.noConflict();
// Assign to new name
$.fn.newJarallax = jarallaxPlugin;
// Use with new name
$('.jarallax').newJarallax({
speed: 0.5
});
```
Call `noConflict()` immediately after loading Jarallax and before any other code that might use `$.fn.jarallax`.
## Video Backgrounds
Jarallax with jQuery supports YouTube, Vimeo, and self-hosted videos:
```javascript YouTube theme={null}
$('.jarallax').jarallax({
speed: 0.2,
videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0',
videoLoop: true,
videoPlayOnlyVisible: true
});
```
```javascript Vimeo theme={null}
$('.jarallax').jarallax({
speed: 0.2,
videoSrc: 'https://vimeo.com/110138539',
videoStartTime: 10,
videoEndTime: 30
});
```
```javascript Self-Hosted theme={null}
$('.jarallax').jarallax({
speed: 0.2,
videoSrc: 'mp4:./video/local-video.mp4,webm:./video/local-video.webm'
});
```
```html Data Attributes theme={null}
```
## Multiple Parallax Instances
Apply different settings to different elements:
```javascript theme={null}
// Slow parallax for hero sections
$('.hero-parallax').jarallax({
speed: 0.2,
type: 'scroll'
});
// Fast parallax for decorative elements
$('.fast-parallax').jarallax({
speed: 0.8,
type: 'scale'
});
// Opacity effect for backgrounds
$('.fade-parallax').jarallax({
speed: 0.5,
type: 'opacity'
});
// Combined effects
$('.fancy-parallax').jarallax({
speed: 0.6,
type: 'scroll-opacity'
});
```
## Chaining Methods
Use jQuery chaining for cleaner code:
```javascript theme={null}
$('.jarallax')
.jarallax({
speed: 0.5,
onInit: function() {
console.log('Initialized');
}
})
.addClass('parallax-active')
.fadeIn(300);
```
## Dynamic Initialization
Initialize parallax on dynamically added elements:
```javascript theme={null}
// Function to initialize new parallax elements
function initParallax() {
$('.jarallax:not(.jarallax-initialized)').jarallax({
speed: 0.5
});
}
// Initial initialization
initParallax();
// Reinitialize after adding new content
$('#add-section').on('click', function() {
const newSection = $('
');
$('body').append(newSection);
initParallax();
});
```
## Advanced Patterns
Initialize only on desktop devices:
```javascript theme={null}
$(document).ready(function() {
if ($(window).width() > 768) {
$('.jarallax').jarallax({
speed: 0.5
});
}
});
```
Adjust speed based on viewport size:
```javascript theme={null}
function initResponsiveParallax() {
const speed = $(window).width() > 768 ? 0.5 : 0.2;
$('.jarallax').jarallax('destroy').jarallax({
speed: speed
});
}
$(window).on('resize', initResponsiveParallax);
initResponsiveParallax();
```
Enable/disable parallax dynamically:
```javascript theme={null}
let parallaxEnabled = true;
$('#toggle-parallax').on('click', function() {
if (parallaxEnabled) {
$('.jarallax').jarallax('destroy');
$(this).text('Enable Parallax');
} else {
$('.jarallax').jarallax({ speed: 0.5 });
$(this).text('Disable Parallax');
}
parallaxEnabled = !parallaxEnabled;
});
```
Show scroll progress for parallax sections:
```javascript theme={null}
$('.jarallax').jarallax({
speed: 0.5,
onScroll: function(calculations) {
const progress = Math.round(calculations.visiblePercent * 100);
$(this).find('.progress-bar').css('width', progress + '%');
}
});
```
## Working with AJAX
Handle parallax in AJAX-loaded content:
```javascript theme={null}
// Load content via AJAX
$.ajax({
url: '/api/get-content',
success: function(data) {
// Add content to page
$('#content-container').html(data);
// Initialize parallax on new elements
$('#content-container .jarallax').jarallax({
speed: 0.5,
onInit: function() {
console.log('AJAX parallax initialized');
}
});
}
});
```
## Troubleshooting
Ensure jQuery is loaded before Jarallax:
```html theme={null}
```
Check that Jarallax is initialized before calling methods:
```javascript theme={null}
// Initialize first
$('.jarallax').jarallax({ speed: 0.5 });
// Then call methods
$('.jarallax').jarallax('onResize');
```
Prevent double initialization:
```javascript theme={null}
// Destroy before reinitializing
$('.jarallax').jarallax('destroy').jarallax({
speed: 0.5
});
```
## Best Practices
Always initialize Jarallax after DOM is ready:
```javascript theme={null}
$(document).ready(function() {
$('.jarallax').jarallax({ speed: 0.5 });
});
```
Remove parallax when elements are removed:
```javascript theme={null}
// Before removing elements
$('.jarallax').jarallax('destroy').remove();
```
Store jQuery objects for better performance:
```javascript theme={null}
const $parallaxElements = $('.jarallax');
$parallaxElements.jarallax({ speed: 0.5 });
```
## Migration from Vanilla JS
If you're migrating from vanilla JavaScript:
```javascript Vanilla JS theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.5
});
jarallax(document.querySelectorAll('.jarallax'), 'destroy');
```
```javascript jQuery Equivalent theme={null}
$('.jarallax').jarallax({
speed: 0.5
});
$('.jarallax').jarallax('destroy');
```
## Next Steps
Learn Jarallax without jQuery
Integrate with modern React applications
Explore all available methods and options
Advanced configuration options
