Rellax

What is it?

The script was supposed to be used to give a sense of depth for the backgrounds we were using on some hero areas. But in it’s current state the plugin works both for foreground and background elements.

It is pretty much markup-agnostic to say so and it covers most of the cases we have encountered in our experiences in developing parallax websites. That being said, you can use it with images, sliders and even videos.

Installation

Include jQuery and the Rellax plugin on your page

<script src=”jquery.min.js”></script>
<script src=”jquery.rellax.min.js></script>

Use data attributes to get things moving

<img data-rellax src="path/to/my-image.jpg">

The data-rellax-container attirbute tells the plugin this is just a wrapper in order to keep child elements from overflowing. These elements won’t be affected by data-rellax-amount and you still have to add data-rellax to them in order to work.

Usage:

<div data-rellax data-rellax-container>
    <img data-rellax src="path/to/my-image.jpg">
</div>

Use JavaScript to run the plugin

If you don't fancy data attributes you can always use the standard way of running the plugin

$('.my-selector').rellax(options);

Options

name	default	data attribute
amount	0.5	data-rellax-amount
bleed	0	data-rellax-bleed
container	"[data-rellax-container]"	—

amount

This option tells the plugin how far in the background you want the element to appear. If set to 0 the plugin will ignore this element keeping it on the same plane with the rest of the content (same behavior as setting position: static to the element). If set to 1 the element will seem to be position very far back and it’s position relative to the screen won’t be affected by the scroll position (same behavior as setting position: fixed to the element).

bleed

When using a container to keep parallax elements from overflowing their parent some visual artefacts which you may identify them as blurry edges. Increase the value of this option to get rid of those. Most of the times 20 should do.

container

A custom selector to target the parallax wrappers if data-attributes dont suit you

A comprehensive example

<div class="rellax" data-rellax-container>
	<img class="rellax" src="path/to/my-image.jpg">
</div>

<div class="rellax-fixed rellax-wrapper">
	<img class="rellax-fixed" src="path/to/my-image.jpg">
</div>

<span data-rellax data-rellax-amount="0.75">Cool!</span>

<script>
	// overwrite default amount value for all elements
	$.fn.rellax.defaults.amount = 0.25;

	$(document).ready(function() {
		// use custom selector to target elements
		// all elements with data-rellax will still be initialized with the new defaults
		$('.rellax').rellax();

		// use different settings for just a set of elements
		$('.rellax-fixed').rellax({
			amount: 1,
			container: '.rellax-wrapper'
		});
	});
</script>