> ## 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. # Quick Start > Create your first parallax scrolling effect in minutes with this step-by-step guide # Quick Start Guide This guide will walk you through creating your first parallax effect with Jarallax. You'll go from zero to a working parallax scrolling background in just a few steps. ## Basic Parallax Image The simplest way to use Jarallax is with a background image and the `` tag. Create a container element with the `jarallax` class and an `` element with the `jarallax-img` class: ```html theme={null}
Background

Your Content Here

This content appears above the parallax background.

``` Add a minimum height to your parallax container so it has dimensions to work with. Call the `jarallax` function on your elements: ```javascript theme={null} import { jarallax } from 'jarallax'; import 'jarallax/dist/jarallax.min.css'; jarallax(document.querySelectorAll('.jarallax')); ``` Or with custom options: ```javascript theme={null} jarallax(document.querySelectorAll('.jarallax'), { speed: 0.2, // Parallax speed (0.0 to 2.0) }); ``` Scroll the page and watch your background move at a different speed than your content! ## Alternative: CSS Background Image You can also use CSS background images instead of `` tags: ```html theme={null}

Your Content Here

``` ```javascript theme={null} jarallax(document.querySelectorAll('.jarallax')); ``` ## Data Attribute Initialization When using UMD mode, Jarallax can automatically initialize elements with the `data-jarallax` attribute: ```html theme={null}
``` With data attributes, you can configure all options directly in HTML. For example: `data-speed="0.5"`, `data-type="scale"`, `data-img-position="0% 50%"`. ## Complete Working Example Here's a full HTML page with a working parallax effect: ```html ESM (Modern) theme={null} Jarallax Example

Scroll Down

Watch the parallax effect in action

Mountain landscape

Parallax Scrolling

Background moves at a different speed

Keep Scrolling

Notice how the background moved slower than the page

``` ```html UMD (Traditional) theme={null} Jarallax Example

Scroll Down

Watch the parallax effect in action

Mountain landscape

Parallax Scrolling

Background moves at a different speed

Keep Scrolling

Notice how the background moved slower than the page

``` ## Video Background Example Add a YouTube or Vimeo video as a parallax background: ```javascript theme={null} import { jarallax, jarallaxVideo } from 'jarallax'; import 'jarallax/dist/jarallax.min.css'; // Initialize video extension jarallaxVideo(); ``` ```html theme={null}

Video Background

``` ```javascript theme={null} jarallax(document.querySelectorAll('.jarallax'), { speed: 0.2, videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0', }); ``` ```html theme={null}

Video Background

``` ### Supported Video Formats ```javascript YouTube theme={null} jarallax(document.querySelectorAll('.jarallax'), { videoSrc: 'https://www.youtube.com/watch?v=ab0TSkLe-E0', }); ``` ```javascript Vimeo theme={null} jarallax(document.querySelectorAll('.jarallax'), { videoSrc: 'https://vimeo.com/110138539', }); ``` ```javascript Self-Hosted theme={null} jarallax(document.querySelectorAll('.jarallax'), { videoSrc: 'mp4:./video/local-video.mp4,webm:./video/local-video.webm', }); ``` For self-hosted videos, provide at least one format (mp4, webm, or ogv). Multiple formats ensure better browser compatibility. ## Customizing Speed The `speed` option controls how fast the background moves relative to scrolling: ```javascript theme={null} // Slower than scrolling (subtle effect) jarallax(element, { speed: 0.2 }); // Default speed jarallax(element, { speed: 0.5 }); // Faster than scrolling jarallax(element, { speed: 1.5 }); // No parallax (moves with page) jarallax(element, { speed: 1 }); // Reverse direction jarallax(element, { speed: -0.5 }); ``` Speed values range from **-1.0** to **2.0**: * `< 0`: Background moves in reverse * `0.0 - 0.9`: Background moves slower (parallax effect) * `1.0`: No parallax (fixed background) * `> 1.0`: Background moves faster ## Different Effect Types Jarallax supports multiple effect types: ```javascript Scroll (Default) theme={null} jarallax(element, { type: 'scroll', // Background moves at different speed speed: 0.5, }); ``` ```javascript Scale theme={null} jarallax(element, { type: 'scale', // Background zooms in/out speed: 0.3, }); ``` ```javascript Opacity theme={null} jarallax(element, { type: 'opacity', // Fades in/out speed: 0.5, }); ``` ```javascript Combined Effects theme={null} jarallax(element, { type: 'scroll-opacity', // Scroll + fade speed: 0.5, }); jarallax(element, { type: 'scale-opacity', // Scale + fade speed: 0.5, }); ``` ## Using with Picture Element For responsive images with different sources: ```html theme={null}
Responsive background

Responsive Parallax

``` ## Disable on Mobile Optionally disable parallax on mobile devices for better performance: ```javascript theme={null} jarallax(document.querySelectorAll('.jarallax'), { speed: 0.2, disableParallax: /iPad|iPhone|iPod|Android/, }); ``` Or use a function: ```javascript theme={null} jarallax(document.querySelectorAll('.jarallax'), { speed: 0.2, disableParallax: function() { return window.innerWidth < 768; }, }); ``` ## Common Patterns ### Hero Section ```html theme={null}

Welcome

Amazing parallax scrolling

``` ### Multiple Sections ```javascript theme={null} // Initialize all parallax sections at once jarallax(document.querySelectorAll('.jarallax'), { speed: 0.2, }); // Or configure each individually jarallax(document.querySelector('.hero'), { speed: 0.2 }); jarallax(document.querySelector('.about'), { speed: 0.5, type: 'scale' }); jarallax(document.querySelector('.contact'), { speed: -0.2 }); ``` ## Troubleshooting * Ensure the container has a defined height * Check that CSS file is loaded * Verify `jarallax` function is called after DOM is ready * Check browser console for errors * Verify image path is correct * Check that image has loaded (Network tab) * Ensure CSS is properly loaded * Try using `imgSrc` option directly: `jarallax(element, { imgSrc: 'path/to/image.jpg' })` * Use the `disableParallax` option to disable on mobile * Reduce image file sizes * Consider using `disableVideo` for video backgrounds on mobile ## Next Steps Now that you have a working parallax effect, explore more advanced features: Learn about all available options and callbacks Explore methods and programmatic control Deep dive into video parallax features Browse more example implementations