jQuery SaucySlider

Demo

Your content goes here.

Getting Started

Step 1: Step up your stage

<div id="stage">
  <-- First Scene -- >
  <div data-scene="0" data-layer="1"></div>

  <-- Second Scene -- >
  <div data-scene="1" data-layer="2"></div>

  <-- Third Scene -- >
  <img src="img/photo.png" data-scene="2" data-layer="0">
</div>

Step 2: Add nav buttons and/or pagers

<-- Nav Buttons -- >
<button class="next">Foward</button>
<button class="prev">Back</button>

<-- Pagers -- >
<ul class="pagers">
  <li>Scene One</li>
  <li>Scene Two</li>
  <li>Scene Three</li>
</ul>

Step 3: Add your JavaScript

$('#stage').saucySlider({
  pager: $('.pagers li'),
  nextButton: $('.next'),
  prevButton: $('.prev'),
  scenePoints: [0, 2500, 8000],
  sceneTimes: [3000, 3000, 6000],
  sceneNames: ['First', 'Second', 'Third']
});

Terminology

Stage
The root element that wraps all the pieces.
Piece
Any element inside the stage that is apart of the parallax animation.
Scene
A user defined point on the stage where pieces are centered around.
Layer
A piece's layer value affects its parallax speed.
<div data-layer="0">

Background Position

Background positions can be set to parallax.

<div data-bg-x="1" data-bg-y="1">

Change X

Change Y

Change X & Y

Nested Pieces

Pieces can be nested inside one another and
move relative to their parents.

<div data-scene="4" data-layer="0">
  <div data-inner data-layer="2">
    I am nested inside another piece!
  </div>
</div>
Download on GitHub
Documentation