> ## 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.
# Basic Usage
> Learn how to implement basic parallax effects with Jarallax using images and backgrounds
Jarallax provides multiple ways to create parallax scrolling effects. This guide covers the fundamentals of setting up image parallax effects.
## Installation
First, install Jarallax in your project:
```bash npm theme={null}
npm install jarallax
```
```bash yarn theme={null}
yarn add jarallax
```
```bash pnpm theme={null}
pnpm add jarallax
```
## Import Methods
Choose the import method that best fits your project setup.
```javascript theme={null}
import { jarallax } from 'jarallax';
import 'jarallax/dist/jarallax.min.css';
// Initialize on your elements
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2
});
```
```html theme={null}
```
```html theme={null}
```
```html theme={null}
```
## Using the jarallax-img Class
The most flexible way to add parallax images is using the `jarallax-img` class on an `` element.
Create a container with the `jarallax` class and an image with the `jarallax-img` class:
```html theme={null}
Your content here...
```
The `jarallax-img` class is the default selector (defined in `imgElement` option). You can customize this selector if needed.
Initialize Jarallax on your elements:
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.5
});
```
Style your parallax container as needed:
```css theme={null}
.jarallax {
position: relative;
min-height: 500px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
```
Using `` tags with the `jarallax-img` class allows better SEO and accessibility compared to CSS background images.
## Using Picture Elements
For responsive images with different sources, use the `` element:
```html theme={null}
Your content here...
```
## Background Image Method
You can also use CSS background images for simpler setups:
```html theme={null}
```
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
imgSrc: 'path/to/image.jpg'
});
```
When using CSS background images, the image won't be visible to screen readers or search engines. Use the `jarallax-img` class method for better accessibility.
## Data Attribute Initialization
In UMD mode, Jarallax supports automatic initialization via data attributes:
```html theme={null}
Your content here...
```
The `data-jarallax` attribute triggers automatic initialization. All options can be set as data attributes using the `data-` prefix (e.g., `data-speed`, `data-img-src`, `data-type`).
## Common Configuration Options
Controls the parallax effect speed. Accepts values from `-1.0` to `2.0`.
* `0.5` (default): Standard parallax effect
* `1.0`: No parallax (moves with scroll)
* `0`: Background is fixed
* Negative values: Parallax in reverse direction
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
speed: 0.2 // Slower parallax effect
});
```
Sets the image position using CSS background-position or object-position values.
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
imgPosition: '50% 50%' // Default: center
});
```
Examples: `'top center'`, `'20% 80%'`, `'left bottom'`
Sets the image size using CSS background-size or object-fit values.
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
imgSize: 'cover' // Default
});
```
Options: `'cover'`, `'contain'`, `'auto'`, `'100% 100%'`
Controls image repetition (for background images only).
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
imgRepeat: 'no-repeat' // Default
});
```
Options: `'no-repeat'`, `'repeat'`, `'repeat-x'`, `'repeat-y'`
Keep the `` tag in its default place after initialization.
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
keepImg: false // Default: false
});
```
When `true`, Jarallax clones the image instead of moving it.
Sets the z-index of the parallax container.
```javascript theme={null}
jarallax(document.querySelectorAll('.jarallax'), {
zIndex: -100 // Default
});
```
## Complete Example
Here's a complete working example:
```html theme={null}
Jarallax Example
Parallax Effect
```
## jQuery No Conflict
If you're using jQuery and need to prevent namespace collisions:
```javascript theme={null}
const jarallaxPlugin = $.fn.jarallax.noConflict();
$.fn.newJarallax = jarallaxPlugin;
// Now use with the new name
$('.jarallax').newJarallax({
speed: 0.2
});
```
## Next Steps
Learn how to use YouTube, Vimeo, and self-hosted videos
Explore different parallax types and mobile optimization
Your content here...
