0

My parallax effect works well in firefox, but in chrome and safari it doesn't work well. Here's a jsfiddle.net/n5kjK/1/ that describes the structure of my page.

My HTML

<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>
<article>
    <div class="thumbnail-container">
        <img src="http://placehold.it/300x200&text=thumbnail"/>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet leo non erat aliquam pellentesque. Duis et dictum velit. Curabitur blandit odio quis luctus ultrices. Maecenas venenatis erat in eros feugiat imperdiet. Duis ultricies nulla quis eros eleifend sagittis.
</article>

My JS

$(function(){
    $(window).on('scroll', function(e) {
        $('.ciao').html("ciao");
        var windowScrollTop=$(this).scrollTop();
        parallax(windowScrollTop);      
    }); 
});

function parallax(windowScrollTop) {
    $('.thumbnail-container img').each(function(index){
    var dif=windowScrollTop-$(this).parent().position().top;
        var scrollSlow = dif *(0.5);
        if(dif>=0)
            $(this).css('top', (scrollSlow) + 'px');
     });
}

and my CSS

article{
    width:100%;
    text-align:justify;
}
.thumbnail-container{
  position: relative;
  height: 350px;
  overflow: hidden;
 }

.thumbnail-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

Where is the problem?

Thanks!!

Seth
  • 10,198
  • 10
  • 45
  • 68
JBassx
  • 33
  • 8
  • What do you mean "doesn't work well"? – zero298 Apr 10 '14 at 21:19
  • scroll is glitching on google chrome and safari. – JBassx Apr 10 '14 at 21:27
  • What does "glitching" mean? I'm running your fiddle in Chrome and it looks fine. – zero298 Apr 10 '14 at 21:28
  • I think I see it. Do you mean the checkerboarding texture whenever you scroll really quickly? If so, there may not be anything you can do on your end without changing how you do the parallaxing, consider: [Fix Checkerboard Scrolling Problem in Google Chrome](http://helpdeskgeek.com/help-desk/fix-checkerboard-scrolling-problem-google-chrome/) – zero298 Apr 10 '14 at 21:38
  • I think he is referring to it being a choppy animation and not smooth. – David Stetler Apr 10 '14 at 21:57
  • Yes, but in Firefox it works very well. Even if I follow the [guide](http://helpdeskgeek.com/help-desk/fix-checkerboard-scrolling-problem-google-chrome/), the animation is choppy in Chrome – JBassx Apr 10 '14 at 22:01
  • Its only a problem scrolling with the mousewheel. check this out http://stackoverflow.com/questions/20542586/javascript-smooth-parallax-scrolling-with-mouse-wheel – David Stetler Apr 10 '14 at 22:08
  • @DavidStetler if you make an answer with your comment I will be happy to accept it. – JBassx Apr 11 '14 at 12:55

1 Answers1

0

The problem is the mouse scroll is not smooth. Use this plugin to override default mouse scroll.

David Stetler
  • 1,465
  • 10
  • 14