CODEWITHSUNDEEP
jquerycssscrolltransformparallax
Dallan
Dallan

Reputation: 109

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!

Upvotes: 2

Views: 1246

Answers (1)

Jason Lydon
Jason Lydon

Reputation: 7180

Based on how SquareSpace did it:

  1. The background image is separate from content. See div.fullscreen-background-image and section.hero-text
  2. This allows section.hero-text to be part of the normal scroll
  3. On scroll, they change the transform:translate3d(0px, 0px, 0px); of the image inside div.fullscreen-background-image which is good because transform is considered a high performance animation!
  4. Without digging to deep into their js, I'd assume they debounced the scroll event and used requestAnimationFrame(). Read more about that here!

That all being said, you don't have a lot of content to scroll over the lady, so why not consider adding her to the body as a background-image and making her background-attachment: fixed; so that the page scrolls over her? Read more.

Upvotes: 1

Related Questions