https://github.com/argyleink/parallax-js
Sideways! Parallax page generator from simple HTML & CSS
https://github.com/argyleink/parallax-js
Last synced: 11 months ago
JSON representation
Sideways! Parallax page generator from simple HTML & CSS
- Host: GitHub
- URL: https://github.com/argyleink/parallax-js
- Owner: argyleink
- Created: 2012-09-15T03:59:51.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2012-09-15T19:52:05.000Z (almost 14 years ago)
- Last Synced: 2025-04-11T02:04:51.354Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.08 MB
- Stars: 2
- Watchers: 2
- Forks: 152
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# A Sideways Parallax JavaScript library based on HTML / CSS
[Demo](http://argyleink.github.com/Parallax-JS)
## Usage
Any `` tag, along with any element with the `animate` class is parsed for parallax effects. `` tags are assumed to line up one-after-another, all other tags can have any effect desired.
### Animation States
To define an animation, simply add several custom css classes in your stylesheet that control the state of an element at one point in time. Animations are automatically generated between these states:
- `.start` -- The style of the element when the `` tag first comes into view
- `.focus` -- The style of the element with the `` tag fills the screen
- `.to` -- The style of the element when the `` anim-delay is over
- `.end` -- The style of the element when the `` tag is just leaving the view
### Other Controls
Add properties to your elements, e.g. ``
- `anim-pause` -- How long to pause at this element
- `anim-detached` -- Set to `true` if this element should not add to the page scroll length (In other words, it still gets animated, but is dependent on usually parent elements)
- `anim-speed` -- Speed multiplier for the animation. Defaults to `1`
- `onFocus` -- Global JS function name to call when the animation comes into focus
- `onBlur` -- Global JS function name to call when the animation leaves focus
- `data-nav` -- Name for navigation sidebar. Overrides default generated by `side-nav.js`
### Side Navigation
include `side-nav.js` to add an auto-generated side navigation bar. This bar is generated from all `section h2:first` elements.
##Features
All animations are done using CSS3 transformations whenever possible and fall back to normal CSS positioning when necessary.