Skip to content

A lightweight js library to effortlessly add a parallax effect to any web page

License

Notifications You must be signed in to change notification settings

mrudelle/parallax.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

58 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

parallax.js

A light-weight though powerfull script to simply add a parallax effect to your webiste!

See live demo at http://mrudelle.github.io/parallax.js/

##The Curtain A good start for your show !

The curtain fades upward when you start scrolling and will come back if you go to the top of the page. To call it from your code, just add class="plx-curtain" to your div.

##Floating div

Sometimes it's useful to make an information slightly appear when a particular element is close to the middle of the screen. Here comes the floating element. Just add class="plx-float" to your div and select the target element: plx-ref="#item-2".

Plus you can chose to make the floating element fade when it goes away by adding: plx-fade="true" like on the live demo.

When specifiying the target you can put any correct element selector, for instance #part-2, input:focus or even .class[attr$="value"]

##Parallax Images

Finally, The most interesting bit! Thanks to the class class="plx-img", just define the speed: plx-speed="0.3". And you have a parallax background image!

Don't forget to set the background image: style="background-image: url('img/iceland.jpg')" And you're done!

You can add offset : plx-offset="-100" in px, and parallax.js will match the top of the image (plus offset) to the top of your div when it reaches the top!

##Install

You want to use it on your website?

No Problem! you can find parallax.min.js in the build folder, also don't forget include the parallax.css file that sets few basic style in order to make the app work correctly.

NOTE: This stylesheet will be hopefully removed as it's almost empty and annoying. Keep in touch for latest release!

Don't forget to share your user-experience and suggest improvement here

Or even contribute !

About

A lightweight js library to effortlessly add a parallax effect to any web page

Resources

License

Stars

Watchers

Forks

Packages

No packages published