Your content goes here.
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']
});
<div data-layer="0">
Background positions can be set to parallax.
<div data-bg-x="1" data-bg-y="1">
Change X
Change Y
Change X & Y
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>