bishawjit-das
11/9/2015 - 3:50 AM

Implement a Simple Parallax Effect

Implement a Simple Parallax Effect

/**
 * Author: Heather Corey
 * jQuery Simple Parallax Plugin
 *
 */

(function($) {

    $.fn.parallax = function(options) {

        var windowHeight = $(window).height();

        // Establish default settings
        var settings = $.extend({
            speed        : 0.15
        }, options);

        // Iterate over each object in collection
        return this.each( function() {

        // Save a reference to the element
        var $this = $(this);

        // Set up Scroll Handler
        $(document).scroll(function(){

    var scrollTop = $(window).scrollTop();
            var offset = $this.offset().top;
            var height = $this.outerHeight();

    // Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}

var yBgPosition = Math.round((offset - scrollTop) * settings.speed);

                // Apply the Y Background Position to Set the Parallax Effect
    $this.css('background-position', 'center ' + yBgPosition + 'px');
                
        });
        });
    }
}(jQuery));


.parallax-section-1 {
height: 450px;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('paste background image URL here');
}

$('.parallax-section-1').parallax({
  speed : 0.15
});

/* Desktop Parallax Photo */
@media (min-width: 651px){
    .parallax-section-1 { background-image: url('paste full sized image URL'); }
}
/* Mobile Parallax Photo */
@media (max-width: 650px) {
    .parallax-section-1 { background-image: url('paste small image URL'); height: 300px; }
}

http://designers.hubspot.com/docs/snippets/design/implement-a-parallax-effect