https://github.com/cuth/parallax-banners
This script does a parallax effect similar to spotify.com
https://github.com/cuth/parallax-banners
Last synced: 8 months ago
JSON representation
This script does a parallax effect similar to spotify.com
- Host: GitHub
- URL: https://github.com/cuth/parallax-banners
- Owner: cuth
- Created: 2013-10-11T21:37:53.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-04-23T03:20:57.000Z (about 12 years ago)
- Last Synced: 2024-12-28T06:11:51.601Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.09 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Parallax Banners
This script does a parallax effect similar to spotify.com. You create frame element with an element inside of it that is larger than the frame. The script will position the element inside the frame as the window is scrolled as to show the whole element from when the top of the frame reaches the bottom of the window to when the bottom of the frame reaches the top of the window.
### Set Up
```html
new ParallaxBanners('.frame','img', { allowReverse: true });
```
First parameter is a selector, jQuery object or DOM element.
Second parameter is a selector starting from the first parameter element.
Third parameter allows you to change the default options.
```javascript
var defaults = {
allowReverse: false,
allowStick: false,
usePositionTop: false,
offMediaQuery: '',
activeClassName: '_parallaxed',
onWindowLoad: false
}
```
Call these public methods on the instance.
```javascript
var instance = new ParallaxBanners('.Frames','.tallElements');
// Re-measure the heights of the Frames and tallElements and browser window and position of the Frames
instance.measure();
// Calculate the new position of all the tallElements depending on window scrollTop.
instance.calcAllPos();
// Turn the parallax effect off
instance.turnSwitch(true);
// or back on
instance.turnSwitch(false);
```
Update and add this CSS for the elements that are parallaxed.
```css
._parallaxed {
position: fixed !important;
z-index: 100;
left: 0;
width: 100%;
}
```