Search code examples
htmlcssparallax

Parallax scrolling with CSS only?

I have been working on a project and I am done with the content. For the design however, I am thinking of using the parallax scrolling technique.

However, all I have been able to find out about it has been with JavaScript or Jquery, whereas I am only proficient with CSS3.

Can parallax scrolling be implemented with CSS3 only(with HTML5 if needed), instead of using jquery plugins? It would be nice if I could be pointed to some tutorials for the same.

Note: This is close to the effect I want to produce(http://jessandruss.us/)

Solution

  • I really like KitKat’s answer, but as Roy Prins suggested, it would be very helpful to reduce it down to the bare essentials, to see precisely what is sufficient to create this effect. I’ve done so here.

    To produce a very basic parallax scroll effect, the following example is sufficient. Note that browser prefixes, fallbacks, etc. have not been addressed. CSS values marked with /* e.g. */ may be changed at the designer’s discretion.

    See my forked pen here.

    <html><head><style>
  html,
  body {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  body {
    perspective: 1px; /* e.g. */
  }
  .background {
    transform:
      translateZ(-.4px)
      scale(.6)
      translateX(-104%)
      translateY(-40%)
      rotate(-5deg); /* e.g. */
  }
  .foreground {
    transform:
      translateZ(.25px)
      translateX(50%)
      scale(.75)
      rotate(2deg); /* e.g. */
  }
</style></head><body>
  <img class="background"/>
  <img class="foreground"/>
</body></html>

    A minor correction to KitKat’s answer: It seems that one doesn’t need transform-style:preserve-3d (at least in Chrome), and that the effect rather depends on the body’s overflow:auto. Remove this and the parallax fails.