Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Parallaxer - CSS3 Parallax
JavaScript
tree: a265e1ae59

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
img
js
LICENSE
README.md
index.css
index.html
test.html

README.md

Parallaxer

CSS3 Parallax

Takes advantage of CSS3 3D transforms to create a real parallax effect. Responds to mouse movement or device motion.

Quick Examples

<div id="viewport1" class="viewport">
    <div id="stage1" class="stage">
        <div id="stars" class="layer"></div>
        <div id="gas" class="layer"></div>
        <div id="planets" class="layer"></div>
    </div>
</div>
.viewport {position: relative; overflow: hidden;}
.stage {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform-style: preserve-3d;}
.stage .layer {position: absolute; top: 0; left: 50%; background-repeat: no-repeat; background-position: top left; -webkit-transform-style: preserve-3d;}
    new Parallaxer(document.getElementById('stage1'), {invert: true});
    new Parallaxer(document.getElementById('stage2'), {xRange: 400, yRange: 400});

Documentation

Parallaxer()

  • Parallaxer(stage [, options])

    Creates a new parallax effect on the stage node. Listens for mousemove or devicemotion to pan stage.

Arguments

  • stage - DOM node containing parallax layers.
  • options.xRange - Maximum distance to scroll in x direction
  • options.yRange - Maximum distance to scroll in y direction
  • options.invert - Invert the direction of travel in both directions

Example

    new Parallaxer(document.getElementById('stage1'), {invert: true});
    new Parallaxer(document.getElementById('stage2'), {xRange: 400, yRange: 400});

Browser Support

Requires CSS3 transform support. When can I use CSS3 transforms?

Something went wrong with that request. Please try again.