Description
BGEffects for script.aculo.us is a JavaScript component for creating perspective animations using background images. It requires Prototype and script.aculo.us libraries.
Download
Dependencies
- Prototype
- script.aculo.us (
effects
component only)
Compatibility
- Firefox 3.6+
- Chrome 9+
- Internet Explorer 8+
- Safari 5+
- Opera 10+
Inspired from
- Nicolas Gallagher: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
- Silverback: http://silverbackapp.com/
BGEffects.PerspectiveEffect
The BGEffects.PerspectiveEffect animates background images of nested containers using differents speeds, which creates an illusion of perspective (aka parallax effect).
Hover the current element to start animation.
new BGEffects.PerspectiveEffect($('perspectiveContainer'), { cssSelector : '.perspectiveEffect', // Valid CSS selector for retrieving layers increment : 1, // Differential increment between layers loop : true // Loop animation forever! });
BGEffects.POVEffect
The BGEffects.POVEffect is an extension of BGEffects.PerspectiveEffect, which enables point of view through mouse position tracking. Move the mouse within the container to change animation direction and speed.
Hover the current element to start animation.
new BGEffects.PerspectiveEffect($('povContainer'), { cssSelector : '.povEffect', // Valid CSS selector for retrieving layers increment : 1, // Differential increment between layers loop : true // Loop animation forever! });