Simple Background Parallax

July 14, 2015

Create a simple background parallax with the following instructions.

jQuery('section[data-type="background"]').each(function(){

        var jQuerybgobj = jQuery(this); // assigning the object

        jQuery(window).scroll(function() {

            var yPos = -(jQuerywindow.scrollTop() / jQuerybgobj.data('speed')); 

            // Put together our final background position
            var coords = yPos + 'px';


            // Move the background
            jQuerybgobj.css({ backgroundPosition: coords });

        });
});

The above code finds the background image being used within your content and adds an alternate scrolling speed to it.

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );  ?>

<div id="main" data-parallax="scroll" data-image-src="<?php echo $image[0]; ?>" >

Sourced here.