### Install Rellax.js using npm
Source: https://dixonandmoe.com/rellax/index
This snippet shows how to install the Rellax.js library using npm, a popular package manager for Node.js. Alternatively, you can download the `rellax.min.js` file directly.
```bash
npm install rellax --save
```
--------------------------------
### Initialize Rellax.js with a Target Node (React Refs)
Source: https://dixonandmoe.com/rellax/index
This example shows how to initialize Rellax.js using a direct DOM node reference, which is particularly useful in frameworks like React. Instead of a CSS class, a ref is passed to the Rellax constructor. Ensure the element has a ref assigned before initializing Rellax.
```javascript
var rellax = new Rellax(this.rellaxRef);
```
--------------------------------
### Set Rellax.js Z-Index with data-rellax-zindex
Source: https://dixonandmoe.com/rellax/index
This example shows how to manage the stacking order of parallax elements using the `data-rellax-zindex` attribute. Higher values will appear on top of elements with lower z-index values.
```html
I’m that default chill speed of "-2" and default z-index of 0
I’m super fast!! And on top of the previous element, I'm z-index 5!!
```
--------------------------------
### Set Rellax.js Speed with data-rellax-speed
Source: https://dixonandmoe.com/rellax/index
This example shows how to control the scrolling speed of parallax elements using the `data-rellax-speed` attribute. Values range from -10 (slower than scroll) to +10 (faster than scroll).
```html
I’m slow and smooth
I’m super fast!!
I’m extra slow and smooth
```
--------------------------------
### Initialize Rellax.js in JavaScript
Source: https://dixonandmoe.com/rellax/index
This code demonstrates the basic initialization of Rellax.js. It selects elements with the class 'rellax' and applies parallax effects. The library accepts any class name as a selector.
```javascript
var rellax = new Rellax('.rellax');
```
--------------------------------
### Responsive Speed for Rellax.js Elements
Source: https://dixonandmoe.com/rellax/index
This snippet illustrates how to apply different parallax speeds based on screen width using responsive attributes like `data-rellax-xs-speed`, `data-rellax-mobile-speed`, `data-rellax-tablet-speed`, and `data-rellax-desktop-speed`.
```html
I parallax at all different speeds depending on your screen width.
```
--------------------------------
### Configure Rellax.js Breakpoints in JavaScript
Source: https://dixonandmoe.com/rellax/index
This JavaScript code configures Rellax.js to use specific breakpoints for responsive speed adjustments. The `breakpoints` array defines the resolutions for mobile, tablet, and desktop.
```javascript
var rellax = new Rellax('.rellax', {
breakpoints: [576, 768, 1201]
});
```
--------------------------------
### Center Rellax.js Elements with data-rellax-percentage
Source: https://dixonandmoe.com/rellax/index
This HTML demonstrates centering parallax elements within the viewport using the `data-rellax-percentage` attribute. A value of `0.5` centers the element.
```html
I’m that default chill speed of "-2" and "centered"
I’m super fast!! And super centered!!
I’m extra slow and smooth, and hella centered.
```
--------------------------------
### Globally Center Rellax.js Elements in JavaScript
Source: https://dixonandmoe.com/rellax/index
This JavaScript snippet enables centering for all Rellax.js elements initialized with the given options. The `center: true` option applies centering globally.
```javascript
var rellax = new Rellax('.rellax', {
center: true
});
```
--------------------------------
### Refresh Rellax.js Instance
Source: https://dixonandmoe.com/rellax/index
The `refresh()` method on a Rellax instance is used to re-initialize the parallax effects with the existing settings. This is useful if the DOM structure or element positions change after the initial load, ensuring the parallax calculations remain accurate. It effectively destroys and recreates the parallax instance internally.
```javascript
// Start Rellax
var rellax = new Rellax('.rellax');
// Destroy and create again parallax with previous settings
rellax.refresh();
```
--------------------------------
### Basic Rellax.js HTML Markup
Source: https://dixonandmoe.com/rellax/index
This is the fundamental HTML structure required for Rellax.js. Elements with the class 'rellax' will have parallax effects applied by default. The default speed is -2.
```html
I’m slow and smooth
```
--------------------------------
### Set Custom Wrapper for Rellax.js Parallax Elements
Source: https://dixonandmoe.com/rellax/index
Configure Rellax.js to use a specific element as the scroll container for parallax effects, instead of the default `body`. This is achieved by passing the `wrapper` option with a CSS selector to the Rellax constructor. This allows for more complex layouts where parallax should be relative to a particular section.
```javascript
var rellax = new Rellax('.rellax', {
wrapper: '.custom-element'
});
```
--------------------------------
### Enable Horizontal Parallax Scrolling with Rellax.js
Source: https://dixonandmoe.com/rellax/index
This snippet demonstrates how to enable horizontal parallax scrolling by setting the `horizontal` option to `true` in the Rellax constructor. It also shows how to optionally disable vertical parallax by setting `vertical` to `false`. This is useful for panoramic-style websites.
```javascript
var rellax = new Rellax('.rellax', {
horizontal: true,
vertical: false
});
```
--------------------------------
### Destroy Rellax.js Instance
Source: https://dixonandmoe.com/rellax/index
The `destroy()` method stops all Rellax parallax effects and resets the targeted elements to their original, pre-parallax positions. This is essential for cleaning up parallax effects when they are no longer needed, such as when a component unmounts or a page section is hidden, preventing potential performance issues or visual glitches.
```javascript
// Start Rellax
var rellax = new Rellax('.rellax');
// End Rellax and reset parallax elements to their original positions
rellax.destroy();
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.