parallax pro background image moves when scrolling

[Josephine]

Hi,

For some reason the parallax pro background image (top) moves when scrolling. It looks like there are two images when inspecting element but I cannot figure out what's wrong.

Is there anyone who would like to take a look and help me with this?

Thanks,
josephine

http://www.adonnadesign.nl/

[Victor Font]

Josephine,

There's nothing wrong with your site. It's working as it's supposed to. Visit my site for comparison: http://victorfont.com/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Josephine]

Hi Victor, thanks for your reply! But when yous scroll on my site you will see what I mean. Perhaps you don't see it at first but when you refresh and scroll again you will see the image moving to the right.

Josephine

[spiezz]

I am having the same issue. It cuts off the image when it shifts to the right while scrolling. I have not had this problem with other sites that I have done with Parallax Pro.

??
Karen

[Josephine]

Glad to hear that I am not the only one with this problem! (sorry for you Karen). I hope there is someone who can see what the problem is.

[Christoph]

Hi Josephine,

Chrome works fine, Firefox and Internet Explorer are showing the jumping.

https://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.adonnadesign.nl%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

and

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.adonnadesign.nl%2F

are showing a few errors that you should take care of.

You made changes to parallax.js.
Can you check with the original file?

Also you are using animate.css.
Maybe a class got accidentally included and is causing the "jumping effect"?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Victor Font]

I see it now. It appears that the background image is resizing itself when you start to scroll.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Josephine]

Hi, i have checked into the parralax.js file and indeed it is a different one. This is because the original file did not show smooth scrolling. I have put it on there so you can see how it is now..

[Josephine]

I have put the smooth scrolling js file back again. Now the moving of the image is back again so I guess this file is the problem:

jQuery(function( $ ){
 
    // Enable parallax and fade effects on homepage sections
    $(window).scroll(function(){
 
        scrolltop = $(window).scrollTop()
        scrollwindow = scrolltop + $(window).height();
 
        $(".home-section-1").css("backgroundPosition", "0px " + -(scrolltop/6) + "px");
 
        if( scrollwindow > $(".home-section-3").offset().top ) {
 
            // Enable parallax effect
            backgroundscroll = scrollwindow - $(".home-section-3").offset().top;
            $(".home-section-3").css("backgroundPosition", "0px " + -(backgroundscroll/6) + "px");
 
        }
 
        if( scrollwindow > $(".home-section-5").offset().top ) {
 
            // Enable parallax effect
            backgroundscroll = scrollwindow - $(".home-section-5").offset().top;
            $(".home-section-5").css("backgroundPosition", "0px " + -(backgroundscroll/6) + "px");
 
        }
 
    });
 
  /* THIS IS THE NEW JS CODE WHICH IS USING FOR SMOOTH SCROLLING EFFECT  */
  $.localScroll({
    duration: 750
  });
 
});

Is there anyone who can see where the problem is in this file? I don't know anything about js............

Thanks

[Author]

Posts