jQuery Content Slider Plugin with Parallax Scrolling Effects - SaucySlider

jQuery Content Slider Plugin with Parallax Scrolling Effects - SaucySlider
File Size: 1.15 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

SaucySlider is a cool jQuery plugin for creating a responsive content slider with CSS3 based smooth horizontal parallax effects. Comes with lots of options to customize the parallax effects using HTML data-* attributes and javaScript properties.

Basic Usage:

1. Link the jQuery javascript library and the jQuery SaucySlider plugin on your webpage.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="saucySlider.js"></script>

2. Create the markup for the main stage, pieces, scenes and layers.

  • 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 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>

3. 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>

4. Call the plugin on the stage element.

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

5. Background positions can be set to parallax.

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

6. 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>

7. Default values.

scenePoints     : [],   // Whole number pixel value where each scene starts
sceneTimes      : [],   // Miliseconds of transition time between each scene
sceneNames      : [],   // The name of each scene to appear in the URL hash
pager           : false,// jQuery object of all pager elements
nextButton      : false,// jQuery object of the element that triggers the move to the next scene
prevButton      : false,// jQuery object of the element that triggers the move to the previous scene
sceneMoved      : function(a){},    // Callback function when a scene moves
sceneStopped    : function(a){},    // Callback function when a scene stops
sceneCanceled   : function(a){}     // Callback function when a scene is canceled

8. HTML data-* attributes.

  • data-scene: Designates which scene the element belongs to
  • data-layer: Designates the speed of the element's parallax effects
  • data-bg-x: Designates the speed of the element's parallax effects for its horizontal background position
  • data-bg-y: Designates the speed of the element's parallax effects for its vertical background position
  • data-transition: Used to add other CSS transition values without overriding SaucySlider's transitions

This awesome jQuery plugin is developed by bobscott. For more Advanced Usages, please check the demo page or visit the official website.