<!DOCTYPE HTML>

< html lang = "en-US" >

< head >

< meta charset = "UTF-8" >

< title > Simple parallax < / title >

< style type = "text/css" >

html, body { margin: 0; padding: 0; }

.section {

display: block;

padding: 20px;

overflow: hidden !important;

}

.article {

position: relative;

padding: 20px;

width: 300px;

background: rgba( 255, 255, 255, 0.7 );

*background: #fff;

}

#section-1 { background: url( 'http://i.imgur.com/9DCQV.jpg' ) 50% 50% no-repeat; }

#section-2 { background: url( 'http://i.imgur.com/3VHWv.jpg' ) 50% 50% no-repeat; }

#section-3 { background: url( 'http://i.imgur.com/mwkCM.jpg' ) 50% 50% no-repeat; }

#section-4 { background: url( 'http://i.imgur.com/9DCQV.jpg' ) 50% 50% no-repeat; }

< / style >

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

< script type = "text/javascript" >

function parallax( bg, sp ) {

$( window ).scroll(function(){

$( '[data-type="' + bg + '"]' ).each(function( i ){

$s = $( '[data-type="' + bg + '"]:eq(' + i + ')' );

var procent = Math.round( ( ( $( window ).scrollTop() - $s.offset().top ) / $s.height() ) * 100 );

var bfrom = parseFloat( $( this ).attr( 'data-from' ) );

var bto = parseFloat( $( this ).attr( 'data-to' ) );

var bpos = map( procent, bfrom, bto );

var bdir;

if ( ( $( this ).attr( 'data-dir' ) == 'x' ) || ( $( this ).attr( 'data-dir' ) == 'horizontal' ) ) {

bdir = { 'backgroundPosition': bpos + 'px' + ' 50%' };

} else if ( ( $( this ).attr( 'data-dir' ) == 'y' ) || ( $( this ).attr( 'data-dir' ) == 'vertical' ) ) {

bdir = { 'backgroundPosition': '50% ' + bpos + 'px' };

} else if ( ( $( this ).attr( 'data-dir' ) == 'xy' ) || ( $( this ).attr( 'data-dir' ) == 'both' ) ) {

bdir = { 'backgroundPosition': bpos + 'px' + ' ' + bpos + 'px' };

} else if ( ( $( this ).attr( 'data-dir' ) == '-xy' ) || ( $( this ).attr( 'data-dir' ) == 'reverse' ) ) {

bdir = { 'backgroundPosition': -bpos + 'px' + ' ' + bpos + 'px' };

} else {

bdir = { 'backgroundPosition': '50% ' + bpos + 'px' };

}

$( this ).css( bdir );

$( this ).find( '[data-type="' + sp + '"]' ).each(function(){

var from = parseFloat( $( this ).attr( 'data-from' ) );

var to = parseFloat( $( this ).attr( 'data-to' ) );

var pos = map( procent, from, to );

var dir;

if ( ( $( this ).attr( 'data-dir' ) == 'x' ) || ( $( this ).attr( 'data-dir' ) == 'horizontal' ) ) {

dir = { 'left': pos };

} else if ( ( $( this ).attr( 'data-dir' ) == 'y' ) || ( $( this ).attr( 'data-dir' ) == 'vertical' ) ) {

dir = { 'top': pos };

} else if ( ( $( this ).attr( 'data-dir' ) == 'xy' ) || ( $( this ).attr( 'data-dir' ) == 'both' ) ) {

dir = { 'top': pos, 'left': pos };

} else if ( ( $( this ).attr( 'data-dir' ) == '-xy' ) || ( $( this ).attr( 'data-dir' ) == 'reverse' ) ) {

dir = { 'top': -pos, 'left': pos };

} else {

dir = { 'top': pos };

}

$( this ).css( dir );

});

});

});

}

function map( s, toStart, toEnd ) {

return ( toStart + ( ( s * ( toEnd - toStart ) ) / 100 ) );

}

jQuery( document ).ready( function( $ ) {

$( '.section' ).each(function(){

$( this ).height( $( window ).height() );

});

parallax( 'background', 'sprite' );

$( window ).resize(function(){

$('.section').each(function(){

$( this ).height( $( window ).height() );

});

parallax( 'background', 'sprite' );

});

});

< / script >

< / head >

< body >

< div class = "section" data- type = "background" data-from = "0" data-to = "-300" data- dir = "y" id = "section-1" >

< div class = "article" data- type = "sprite" data-from = "1200" data-to = "-1200" data- dir = "y" >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< / div >

< / div >

< div class = "section" data- type = "background" data-from = "-200" data-to = "-10" data- dir = "x" id = "section-2" >

< div class = "article" data- type = "sprite" data-from = "500" data-to = "-10" data- dir = "x" >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< / div >

< / div >

< div class = "section" data- type = "background" data-from = "-50" data-to = "-100" data- dir = "both" id = "section-3" >

< div class = "article" data- type = "sprite" data-from = "200" data-to = "-400" data- dir = "both" >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< / div >

< / div >

< div class = "section" data- type = "background" data-from = "-200" data-to = "-400" data- dir = "y" id = "section-4" >

< div class = "article" data- type = "sprite" data-from = "200" data-to = "400" data- dir = "reverse" >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< p > Bloggo ralning sloo < / p >

< / div >

< / div >

< / body >