CSS-only mouseover parallax demo. Using a grid and css transitions we simulate mouseover parallax without JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
font
grunt
img/assets
js
model
sass
templates
.bowerrc
.gitignore
Gruntfile.js
README.md
app.yaml
bower.json
config.rb
crossdomain.xml
favicon.ico
humans.txt
index.php
old.html
package.json
robots.txt

README.md

CSS MouseOver Parallax

CSS MouseOver Parallax is a CSS demo that generates mouseover parallax effect without JavaScript.

cssGen.js

To emulate this same effect you can use cssGen.js. It's a small script that will compute the necessary CSS code for a given DOM structure and input parameters.

Visit CSS MouseOver Parallax for a live example.

Dependencies

  • PHP ( //php.net )
  • Compass ( //compass-style.org )
  • Node.js ( //nodejs.org )

Installation

After the listed dependencies are installed, you can install the npm ones by running:

npm install

Now you should have:

  • Grunt ( //gruntjs.com/getting-started )
  • Bower ( //bower.io/ )

To install all the project dependencies run:

bower install

To compile the css run:

compass compile

If the basic dependencies are met, simply run grunt and it should start the build process, compiling the css, generating sprites and installing npm and bower dependencies automatically.

The original code will be visible at '/dev' and the built version under '/'. Note that the built version is not part of the repository.