Parallex Test

by Chris LaFrombois

HTML

<section data-type="background" data-speed=".8" class="test">
    
</section>

<section data-type="content" class="content">
    <p>Turpis fringilla erat. Maecenas consequat elementum. Elementum montes neque. Amet quam vestibulum. Pretium integer curabitur nonummy convallis facilisis. Con mi nunc consequat donec et aliquet et enim. At odio ut elit nunc lorem neque ut fermentum tellus eu vel pellentesque dolor suscipit mattis dui nonummy velit conubia arcu diam sed aenean. Vel in mattis euismod a urna. Dis at lacus. Dolor molestie velit. Dapibus vitae donec lorem est vestibulum tortor vehicula tellus. Volutpat rutrum venenatis sit sollicitudin etiam. Sit nulla asperiores. Et maecenas purus et vehicula leo. Semper sit mauris.</p>
</section>

<section data-type="background" data-speed="10" id="test2"></section>

<section data-type="content" class="content">
    <p>Turpis fringilla erat. Maecenas consequat elementum. Elementum montes neque. Amet quam vestibulum. Pretium integer curabitur nonummy convallis facilisis. Con mi nunc consequat donec et aliquet et enim. At odio ut elit nunc lorem neque ut fermentum tellus eu vel pellentesque dolor suscipit mattis dui nonummy velit conubia arcu diam sed aenean. Vel in mattis euismod a urna. Dis at lacus. Dolor molestie velit. Dapibus vitae donec lorem est vestibulum tortor vehicula tellus. Volutpat rutrum venenatis sit sollicitudin etiam. Sit nulla asperiores. Et maecenas purus et vehicula leo. Semper sit mauris.</p>
</section>

<section data-type="background" data-speed="2" class="test">
    
</section>

<section data-type="content" class="content">
    <p>Turpis fringilla erat. Maecenas consequat elementum. Elementum montes neque. Amet quam vestibulum. Pretium integer curabitur nonummy convallis facilisis. Con mi nunc consequat donec et aliquet et enim. At odio ut elit nunc lorem neque ut fermentum tellus eu vel pellentesque dolor suscipit mattis dui nonummy velit conubia arcu diam sed aenean. Vel in mattis euismod a urna....

CSS

* {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    margin:0;
    padding:0;
}

section {
    display:block;
    margin:0;
    padding:0;
}

.content {
    background-color:yellow;
}

.test {
    height:300px;
    background-image:url(http://www.placehold.it/1000x600/FF0000);
    background-attachment:fixed;
    background-size:cover;
    background-position:50% 0;
}

#test2 {
    height:300px;
    background-image:url(http://www.placehold.it/1000x600);
    background-size:cover;    
    background-attachment:fixed;
}

JavaScript

$(document).ready(function(){

var $window = $(window); // Sets a variable to the window

$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
});
});
});