Lulu Parallax

Each parallax container takes a CSS class for direction relative to scrolling — with or against — and a speed rate

The following goes in the <body> for the example below
<div class="parallax-group">
<div class="parallax-container background against" data-rate=".5"></div>
<div class="parallax-container foreground against" data-rate=".75">...</div>
<div class="parallax-container foreground with" data-rate=".5">...</div>
</div>
FOREGROUND / AGAINST @ .75
FOREGROUND / WITH @ .5
The following goes in the <body> for the example below
<div class="parallax-group">
<div class="parallax-container background with" data-rate=".25"></div>
<div class="parallax-container foreground against" data-rate=".25">...</div>
</div>
FOREGROUND / AGAINST @ .25
The following goes in the <body> for the example below
<div class="parallax-group">
<div class="parallax-container background against" data-rate="1"></div>
<div class="parallax-container foreground with" data-rate=".5">...</div>
<div class="parallax-container foreground with" data-rate=".25">...</div>
</div>
FOREGROUND / WITH @ .5
FOREGROUND / WITH @ .25

carlosruiz.me