Parallax Scroll Working On 1 Image But Not On Other

I am working on giving parallax effect to 2 of my background images and it is working on the first image but not on the second image..the code is as below jquery : $(document).read

Solution 1:

You are using $window.scrollTop(), which will get bigger as you scroll down the page, and setting that relative to the top of the image container. Seems like you need to subtract the elements position from the top of the document first:

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

    var $bgobj = $(this); // assigning the object

    $(window).scroll(function() {

        // scroll the background at var speed// the yPos is a negative value because we're scrolling it UP!var yOffset = $bgobj.offset().top;
        var yPos = -(($window.scrollTop() - yOffset) / $bgobj.data('speed'));

        // Put together our final background positionvar coords = '50% '+ yPos + 'px';

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

    }); // end window scroll

});

});

Your first image is likely working as it's at the top of the page so the offset doesn't matter?

Solution 2:

Try this

    $(document).ready(function() {
    $(window).scroll(function() {
        $('section[data-type="background"]').each(function(i,e) {
            // scroll the background at var speed// the yPos is a negative value because we're scrolling it UP!var yPos = -($(window).scrollTop() / $(e).data('speed'));

                // Put together our final background positionvar coords = '50% '+ yPos + 'px';

                // Move the background
                $(e).css({ backgroundPosition: coords });
        });
    }); // end window scroll

});