parallax-scrolling

A component to make parallax scrolling with css (perspective 3d) and js (z-index)


License
MIT
Install
bower install parallax-scrolling

Documentation

parallax scrolling

A component to make parallax scrolling with css (perspective 3d) and js (z-index)

See the demo

Install

With bower

bower install --save parallax-scrolling

Or just download the main files dist/parallax-scrolling.css, dist/parallax-scrolling.js in your project, and make a reference to their, like:

<link rel="stylesheet" href="path/to/parallax-scrolling.css">
<script src="path/to/parallax-scrolling.css"></script>

Usage

And then, in your html, you can use the tag:

<div class="parallax-scrolling">
  <div class="layer-background home"></div>
  <div class="layer-base"></div>
  <div class="layer-background about"></div>
  <div class="layer-base"></div>
</div>

Classes:

  • .parallax-scrolling define container to parallax sections
  • .layer-base foreground layer in perspective, with solid background-color
  • .layer-background background layer in perspective

Class .home, and .about just be examples of custom classes that you need implement in your own style. You probaly will need define the background-image, background-position, etc. I.e:

// custom css
.background.home {
  background-image: url('path/to/img');
}

.background.about {
  background-image: url('path/to/img');
  background-position: center right;
}

By default, .layer-background have background-size: auto 100%, by convenience.