0

I am using parallax js (http://pixelcog.github.io/parallax.js/) in my new web site. In five places I am using this and without any content only with the parallax images it is working really fine in all the browsers.

But with the content, parallax is not working smoothly in Firefox, IE and Safari browsers. It seems like jerking the both parallax image and its div content. Content of the parallax div moving first then the parallax image is moving.

Here is my code snippet of the parallax setup.

<section class="my-class parallax-window" data-parallax="scroll" data-image-src="img/my-image.jpg">
   <!-- my content going here... -->
</section>

.parallax-window { min-height: 400px; background: transparent; }

How can I make this smooth for all the browsers..?

WP Learner
  • 788
  • 1
  • 13
  • 34

2 Answers2

0

Look at the section on the github page titled, "Using inner HTML for complex content". This may help. I had the issue of the top and bottom edges flickering due to showing a little background on scroll, which I fixed with the "bleed" option, allowing a little overlap at the top bottom to hide the glitchy-ness. There is also an experimental option called, "overScrollFix" that you can set to TRUE which may help in some browsers.

Anthony Horn
  • 1
0
// To fix parallax jerky effects on IE Browsers  
    if (navigator.userAgent.match(/Trident\/7\./)) {  
        $('body').on("mousewheel", function () {  
            event.preventDefault();  
            var wd = event.wheelDelta;  
            var csp = window.pageYOffset;  
            window.scrollTo(0, csp - wd);  
        });  
    }
Akshit Kanolkar
  • 1
  • 1