Parallax Slider

Aug 23, 2014 in Slideshow 4543 views

Download

Overview
Documents

User Rating: 0/5 ( 0 votes)

Your Rating:

This content slider incorporates a parallax scrolling effect where each slide and its contents glide into view at different speeds, creating a captivating visual experience. Visual intrigue aside, however, Parallax Slider is an easy to customize, responsive slider that can adapt to different screen and device sizes, by supporting a percentage value as its width.

Features

Entire contents of slider defined via HTML markup. Each slide consists of a background image layer plus any number of content layers. Each layer within the slide is glided in sequentially after a slight delay following the previous.
The Slider supports two orientations- horizontal (default), or vertical (up down scrolling) instead.
Slider supports either fixed or fluid (percentage) dimensions via CSS, allowing for a responsive slider.
Slider can be set to automatically rotate and optionally stopping after x cycles.
Persistence of last viewed slide supported, so when the user reloads the page, the slider resumes from the last slide.
Slider automatically pauses onMouseover.

Source: dynamicdrive.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="parallaxslider.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.velocity.min.js"></script>
<script type="text/javascript" src="jquery.touchSwipe.min.js"></script>

<script src="parallaxslider.js" type="text/javascript">

2. HTML

<div id="myparallaxslider" class="parallaxslider">

	<div class="slide">
		<div class="bgoverlay" data-bgimage="zenrocks.jpg"></div>
		<div class="desc">A cairn is a man-made pile (or stack) of stones, used as trail markers in many parts of the world. -Wikipedia</div>
		<div class="desc">
			<div style="position:absolute; bottom:15px; left:30px; width:250px; background:black; font:normal 105% Germand; padding:10px; font-style:italic; border-radius:10px; line-height:1.4em;">
			“Letting go is the lesson. Letting go is always the lesson. Have you ever noticed how much of our agony is all tied up with craving and loss?” <br />- Susan Gordon Lydon 
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="callalilies.jpg"></div>
		<div class="desc">
			<div style="position:absolute; width:150px; right:10px; line-height:1.5em; background:#E2AF16; padding:10px; border-radius:7px">“The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
			</div>
		</div>
		<div class="desc">
			<div style="position:absolute; bottom:1em">Cally Lily is a perennial plant, evergreen where rainfall and temperatures are adequate. -Wikipedia
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="leaf.jpg"></div>
		<div class="desc">
			<div style="position:absolute; top:40%; background:#754B08; font:normal 100% Germand; padding:10px; font-style:italic; border-radius:10px">
			“Problems that remain persistently insoluble should always be suspected as questions asked in the wrong way” <br /><br />Alan Wilson Watts
			</div>
		</div>
	</div>

	<div class="slide">
		<div class="bgoverlay" data-bgimage="rowan.jpg"></div>
		<div class="desc" style="padding:0">
			<img src="strip1.jpg" style="position:absolute; top:0; opacity:0.9" />
		</div>
		<div class="desc" style="padding:0">
			<img src="strip2.jpg" style="position:absolute; top:135px; opacity:0.9" />
		</div>
		<div class="desc" style="padding:0">
			<img src="strip3.jpg" style="position:absolute; top:259px; opacity:0.9" />
		</div>
	</div>

</div>

<a href="javascript:firstparallaxslider.navigate('back')">Back</a> | <a href="javascript:firstparallaxslider.navigate('forth')">Forth</a>

Understanding the structure of the parallax slider's markup

The slider's markup consists of a main DIV with an unique ID and CSS class of ="parallaxslider". Then for each slide, it consists of the following:

A <div class="bgoverlay"> element to display a background image. Use the data-bgimage attribute to specify the full path to the background image, which is easier than using CSS's style="background:url(...)", though the later method also works.
Any number of <div class="desc"> elements to show arbitrary pieces of content that slide in one after the next. This DIV acts as a content holder, and should not be modified in any way via CSS, such as add padding/ margin or CSS positioning to it. Instead, define contents inside this DIV and stylize those contents to achieve the desired contents positioning and look. The following shows two examples of a slide's markup, one correct, one incorrect:

Correct

<div class="desc">
	<div style="position:absolute; width:150px; right:10px;">
		“ The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
	</div>
</div>

Incorrect

<div class="desc" style="position:absolute; width:150px; right:10px;">
	The things I carry are my thoughts. That's it. They are the only weight. My thoughts determine whether I am free and light or burdened.” <br /><br />- Kamal Ravikant
</div>

So as you can see, the <div class="desc"> tag itself should always be left untouched, with no style added to it.

All "bgoverlay" and "desc" DIV are animated into view in succession, with a delay as defined by options.delaybtwdesc between them.

3. JAVASCRIPT

Add the below code to the HEAD section of your page:

var firstparallaxslider=new parallaxSlider({
    wrapperid: 'myparallaxslider', //ID of DIV on page to house slider
    displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:true, pauseonmouseover:true},
    delaybtwdesc:  500, // delay in milliseconds between the revealing of each description layer inside a slide
    navbuttons: ['left.png', 'right.png', 'up.png', 'down.png'], // path to nav images
    activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
    orientation: 'h', //Valid values: "h" or "v"
    persist: true, //remember last viewed slide and recall within same session?
    slideduration: 1000 //transition duration (milliseconds)
});

4. OPTIONS

options	Description
wrapperid Required	The ID of an empty DIV container on your page that will show a Parallax Slider. The corresponding DIV on the page should carry a matching unique ID and a specific CSS class: <div id="myparallaxslider" class="parallaxslider"></div>
displaymode defaults to {type:'auto', pause:2000, stoponclick:false, cycles:2, pauseonmouseover:true}	Sets the primary attributes of your slider, from whether this is an automatic or manual slider, the pause between slides, the number of cycles before the slider stops in automatic mode, to whether the slider should pause onMouseover: { type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true }, The "type" option should be set to either "auto" or "manual", for automatic or manual rotation, respectively. The "cycles" option when set to 0 will cause the slider to rotate perpetually in automatic mode, while any number larger than 0 means it will stop after x cycles. The "pausemouseover" option when set to true will cause the slider to pause when the mouse rolls over it in automatic mode.
slideduration Defaults to 500	The duration of the sliding effect when transitioning from one slide to the next, in milliseconds.
delaybtwdesc Defaults to 500	Sets the pause between the introduction of each description DIV inside a slide (<div class="slide">) in milliseconds, which creates the parallax effect. A description DIV is identified by either <div class="bgoverlay"> or <div class="desc"> inside each slide.
navbuttons Required	An array slider to the paths of the 4 images that make up the navigational buttons that get automatically added to the slider, in that order: // path to nav images ['left.gif', 'right.gif', 'up.gif', 'down.gif'],
activeslideclass Defaults to "selectedslide"	An arbitrary CSS class that gets added to the currently shown slide's DIV (in addition to the shared "slide" class). This class is removed when the slide is no longer the active one. It lets you apply additional styling via CSS to the currently shown slide.
orientation Defaults to "h"	Set to either "h" or "v" to cause the slider to scroll the slides from left to right (horizontally), or up down (vertically) instead.
persist Defaults to true	Boolean variable that decides whether the slider should remember and recall the last viewed slide within a browser session when the page is reloaded.

JS Tutorial

Parallax Slider

Features

Related Articles