mardi 21 avril 2015

How To Use CSS3 For Smooth Parallax Scrolling Cross-Browser, Cross-Platform

I'm implementing a parallax header on a page. It works pretty well with the Apple TrackPad on Firefox & Safari on Mac OS X. But doesn't work so well on Chrome for Mac nor on any browser in Windows.

This is the jQuery I'm implementing:

/*----------------------------------------------------------------------------*\
 * PARALLAX HEADER IMAGE
\*----------------------------------------------------------------------------*/
$(window).scroll( function(){
  var scroll = $(window).scrollTop(),
  slowScroll = scroll*.85;
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    $('.no-touch  .js--parallax-header').css({ transition: "" });
  }, 50));
  $('.no-touch  .js--parallax-header').css({
    transform: "translate3d( 0, " + slowScroll + "px, 0)",
    transition: "none" });
});

This is the page I'm trying to implement it on.

It's jittery for one. And with a mouse with a scroll wheel, it's very jumpy. My page does also have a transform effect on it for an off canvas navigation menu so I think I need to work around that.

Squarespace does an excellent job of implementing this same parallax effect. How did they do it?

Any help is greatly appreciated! Thanks!

Aucun commentaire:

Enregistrer un commentaire