Simple parallax
A simple parallax plugin.
HTML
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div class="position1">
<h2 class="position2" data-sp="top:1;">1</h2>
<h2 class="position2" data-sp="top:2;">2</h2>
<h2 class="position2" data-sp="top:3;">3</h2>
<h2 class="position2" data-sp="top:4;">4</h2>
<h2 class="position2" data-sp="top:5;">5</h2>
<h2 class="position2" data-sp="top:6;">6</h2>
<h2 class="position2" data-sp="top:-6;">-6</h2>
<h2 class="position2" data-sp="top:-5;">-5</h2>
<h2 class="position2" data-sp="top:-4;">-4</h2>
<h2 class="position2" data-sp="top:-3;">-3</h2>
<h2 class="position2" data-sp="top:-2;">-2</h2>
<h2 class="position2" data-sp="top:-1;">-1</h2>
</div>
CSS
h2{
text-align:center;
color: #fff;
font-size: 2em;
font-family: Helvetica, Arial, san-serif;
background-color:#2fced2;
padding:10px;
border-radius:3px;
opacity:0.9;
position:relative;
display: inline-block;
}
.position1{
top:500px;margin: auto;display: inline-block;position: relative;width: auto;
}
JavaScript
//based on: http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
function simpleParallax() {
//My verical parallax world
$('[data-sp]').each(function() {
var $obj = $(this);//A simple Parallax Item
//Get each command from data-sp
var rawData = $obj.data('sp');
var commands = rawData.split(";");
commands.pop();//removes empty trailing command
var len = commands.length;
for (i=0;i<len;i++){
//Get property and speed
var propertiesArray = commands[i].split(":");
var property = propertiesArray[0],
speed = propertiesArray[1];
//Check for current property value, else set 0
var staticValCheck = parseInt($(this).css(property));
var staticVal = isNaN(staticValCheck) ? 0 : staticValCheck;
//TODO add support for multiple properties
$(window).scroll(function() {
var winY = -($(window).scrollTop() / speed); //speed
var coord = staticVal + winY + 'px'; //apply speed to attribute
//$obj.animate(anim,delayAni,easing);
$obj.css(property,coord);
});
}
});
}
simpleParallax();