CODEWITHSUNDEEP
javascriptjquerycssbackground-image
Lewis Hardisty
Lewis Hardisty

Reputation: 65

jQuery Parallax Background Issue

I have the following jQuery code to animate the background images with a parallax effect.

I have two parallax images on my page and it seems the background position of the second one located further down is already way out of position. I believe it's because the scrollTop function is constantly changing from the top of the site and not to the top of the div that the background image resides.

I got the code from here https://gist.github.com/omgmog/7198844

Any ideas on how I can fix this?

I've added this to a JSFiddle here to help someone figure the issue out -

jsfiddle.net/Ls0ftxvq/


    $(function() {
        var $el = $('.parallax-background');
        $(window).on('scroll', function () {
            var scroll = $(document).scrollTop();
            $el.css({
                'background-position':'center '+(-.4*scroll)+'px'
            });
        });
        $(window).scroll();
    });

Upvotes: 0

Views: 343

Answers (1)

Gabriele Carbonai
Gabriele Carbonai

Reputation: 459

Why don't use just CSS for do parallax effect? Remove your javascript and add this code in your css file

.full-heignt {
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
}

you have an example here based on your code

Upvotes: 0

Related Questions