nk-o / jarallax

Jarallax Parallax scrolling for modern browsers. Supported <img> tags, background images, YouTube, Vimeo and Self-Hosted Videos. Online Demo Table of Contents • WordPress Plugin • Quick Start • Import Jarallax • ESM • ESM CDN • UMD • UMD CDN • Package Imports (Bundlers / Node) • TypeScript • React / Next.js • Prepare HTML • Run Jarallax • A. JavaScript way • B. Data attribute way • C. jQuery way • Background Video Usage Examples • A. JavaScript way • B. Data attribute way • Options • Disable on mobile devices • Additional options for video extension • Events • Additional events for video extension • onScroll event • Methods • Call methods example • A. JavaScript way • B. jQuery way • For Developers • Real Usage Examples • Credits WordPress Plugin We made WordPress plugin to easily add backgrounds for content in your blog with all Jarallax features. Demo: Download: Quick Start There are a set of examples, which you can use as a starting point with Jarallax. • ES Modules • React • React Hooks • JavaScript • Next.js App Router • Next.js App Router Advanced Usage • HTML • jQuery Import Jarallax Use one of the following examples to import jarallax. ESM We ship self-hosted ESM bundles ( and ) for browsers that support ES modules. ESM CDN UMD Jarallax may be also used in a traditional way by including script in HTML and using library by accessing . UMD CDN Package Imports (Bundlers / Node) Install Jarallax as a Node.js module using npm. Use the package root in modern bundlers: The package root is safe to import in SSR and Node toolchains, but Jarallax is still a frontend-only runtime and must only be initialized once a real browser DOM exists. The CommonJS entry point remains available for older bundlers and browser-targeted build setups: In SSR frameworks such as React or Next.js, keep the import at module scope if you want, but call only in a client-only lifecycle or behind a guard. TypeScript Generated declarations are published from , while remains as a compatibility re-export. React / Next.js The subpath keeps imports SSR-safe while delaying all DOM work until runs on the client. The built-in React components apply the required base Jarallax styles automatically, so you do not need to import manually when using , , or . Component API: Hook API for custom markup: Video hook API: and are part of the React API when you want full control over the rendered markup. For Next.js App Router, keep these components in files marked with . Server rendering only outputs regular HTML, and the parallax instance is created after hydration on the client. Prepare HTML Run Jarallax Note: automatic data-attribute initialization and jQuery integration are available in UMD mode only. A. JavaScript way B. Data attribute way Note: You can use all available options as data attributes. For example: , , , etc... C. jQuery way No conflict (only if you use jQuery) Sometimes to prevent existing namespace collisions you may call on the script to revert the value of. Background Video Usage Examples A. JavaScript way B. Data attribute way Note: self-hosted videos require 1 video type only, not necessarily using all mp4, webm, and ogv. This is only needed for maximum compatibility with all browsers. Options Options can be passed in data attributes or in object when you initialize jarallax from script. Name | Type | Default | Description :--- | :--- | :------ | :---------- type | string | | scroll, scale, opacity, scroll-opacity, scale-opacity. speed | float | | Parallax effect speed. Provide numbers from -1.0 to 2.0. containerClass | string | | Container block class attribute. imgSrc | path | | Image url. By default used image from background. imgElement | dom / selector | | Image tag that will be used as background. imgSize | string | | Image size. If you use tag for background, you should add values, else use values. imgPosition | string | | Image position. If you use tag for background, you should add values, else use values. imgRepeat | string | | Image repeat. Supported only values. keepImg | boolean | | Keep tag in it's default place after Jarallax inited. elementInViewport | dom | | Use custom DOM / jQuery element to check if parallax block in viewport. More info here - Issue 13. zIndex | number | | z-index of parallax container. disableParallax | boolean / RegExp / function | - | Disable parallax on specific user agents (using regular expression) or with function return value. The image will be set on the background. Disable on mobile devices You can disable parallax effect and/or video background on mobile devices using option and/or . Example: Or using function. Example: Additional options for video extension Requires the video extension bundle. In package-based apps call after importing from . In script-tag usage load after the core bundle. Name | Type | Default | Description :--- | :--- | :------ | :---------- videoClass | string | | Video frame class attribute. Will also contain the type of the video, for example videoSrc | string | | You can use Youtube, Vimeo or Self-Hosted videos. Also you can use data attribute . videoStartTime | float | | Start time in seconds when video will be started (this value will be applied also after loop). videoEndTime | float | | End time in seconds when video will be ended. videoLoop | boolean | | Loop video to play infinitely. videoPlayOnlyVisible | boolean | | Play video only when it is visible on the screen. videoLazyLoading | boolean | | Preload videos only when it is visible on the screen. disableVideo | boolean / RegExp / function | - | Disable video load on specific user agents (using regular expression) or with function return value. The image will be set on the background. Events Events used the same way as Options. Name | Description :--- | :---------- onScroll | Called when parallax working. Use first argument with calculations. More info see below. onInit | Called after init end. onDestroy | Called aft…