Jarallax provides several methods to control parallax instances after initialization. Methods can be called on elements that have already been initialized with Jarallax.
Main Function
jarallax()
The main function used to initialize Jarallax or call methods on existing instances.
jarallax(
elements: Element | Element[] | NodeListOf<Element> | JQuery<Element>,
options: JarallaxOptions | string
): void | boolean
Parameters
elements
Element | Element[] | NodeListOf<Element> | JQuery<Element>
required
The DOM element(s) to initialize or call methods on.Can be:
- A single DOM element
- An array of elements
- A NodeList (e.g., from
querySelectorAll)
- A jQuery object (UMD mode only)
options
JarallaxOptions | string
required
Either:
- A configuration object for initialization (see Options)
- A method name string to call on existing instances
Initialization Example
import { jarallax } from 'jarallax';
// Initialize with options
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2,
type: 'scroll'
});
// Initialize a single element
const element = document.querySelector('.parallax');
jarallax(element, {
speed: 0.5
});
jQuery Usage (UMD mode)
$('.jarallax').jarallax({
speed: 0.2
});
Instance Methods
Once initialized, you can call methods on Jarallax instances by passing the method name as the second parameter.
destroy
Destroys the Jarallax instance and restores the element to its original state before initialization.
jarallax(
elements: Element | Element[] | NodeListOf<Element> | JQuery<Element>,
methodName: 'destroy'
): void
- Removes all Jarallax-created DOM elements (container, parallax image)
- Restores original element styles from before initialization
- Removes parallax observers and event listeners
- Restores the original
<img> tag to its original position (if applicable)
- Calls the
onDestroy callback if provided
- Deletes the jarallax instance from the element
jarallax(document.querySelectorAll('.jarallax'), 'destroy');
isVisible
Checks if the parallax element is currently visible in the viewport.
jarallax(
elements: Element | Element[] | NodeListOf<Element> | JQuery<Element>,
methodName: 'isVisible'
): boolean
boolean - true if the element is in the viewport, false otherwise.
const element = document.querySelector('.jarallax');
const visible = jarallax(element, 'isVisible');
if (visible) {
console.log('Parallax element is visible');
}
This method returns the visibility status based on the first element in the collection.
onResize
Recalculates and updates the parallax image size and container clipping. This method is automatically called on window resize and load events.
jarallax(
elements: Element | Element[] | NodeListOf<Element> | JQuery<Element>,
methodName: 'onResize'
): void
- After changing element dimensions via JavaScript
- After showing/hiding the element
- After layout changes that affect the element’s size
- After modifying CSS that affects dimensions
jarallax(document.querySelectorAll('.jarallax'), 'onResize');
jarallax(
elements: Element | Element[] | NodeListOf<Element> | JQuery<Element>,
methodName: 'onScroll'
): void
- After programmatic scrolling
- In custom scroll containers
- When implementing custom scroll logic
- To force an immediate position update
jarallax(document.querySelectorAll('.jarallax'), 'onScroll');
Complete Usage Example
import { jarallax } from 'jarallax';
// Initialize
const elements = document.querySelectorAll('.jarallax');
jarallax(elements, {
speed: 0.5,
type: 'scroll'
});
// Check visibility
const isVisible = jarallax(elements[0], 'isVisible');
console.log('Is visible:', isVisible);
// Manually trigger resize recalculation
window.addEventListener('custom-resize', () => {
jarallax(elements, 'onResize');
});
// Manually trigger scroll recalculation
window.addEventListener('custom-scroll', () => {
jarallax(elements, 'onScroll');
});
// Destroy when done
const destroyButton = document.querySelector('.destroy-btn');
destroyButton.addEventListener('click', () => {
jarallax(elements, 'destroy');
});
Method Chaining
Most methods return void, so method chaining is not supported. The exception is isVisible, which returns a boolean value.
jQuery No-Conflict Mode
If you’re using jQuery and need to avoid namespace collisions:
const jarallaxPlugin = $.fn.jarallax.noConflict();
$.fn.newJarallax = jarallaxPlugin;
// Now use the new name
$('.jarallax').newJarallax({
speed: 0.5
});
