https://github.com/drcmda/react-springy-parallax
🌊 A springy, composable parallax-scroller for React - deprecated
https://github.com/drcmda/react-springy-parallax
Last synced: 12 months ago
JSON representation
🌊 A springy, composable parallax-scroller for React - deprecated
- Host: GitHub
- URL: https://github.com/drcmda/react-springy-parallax
- Owner: drcmda
- License: mit
- Created: 2017-03-21T19:47:48.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-22T17:23:43.000Z (about 8 years ago)
- Last Synced: 2025-05-14T08:43:38.205Z (12 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.5 MB
- Stars: 1,311
- Watchers: 15
- Forks: 52
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-github-projects - react-springy-parallax - 🌊 A springy, composable parallax-scroller for React - deprecated ⭐1,308 `JavaScript` (📦 Legacy & Inactive Projects)
README
*** This project has been merged into react-spring: https://github.com/drcmda/react-spring
*** Changes and bugfixes will go there instead.
--
A springy, composable parallax-scroller for React.
npm install react-springy-parallax --save
Demo: http://react-springy-parallax.surge.sh
Simple example: http://react-springy-parallax-simple.surge.sh
Example source: https://github.com/drcmda/react-springy-parallax/blob/master/example/index.js
More complex example: https://github.com/drcmda/awv3node-homepage (the one in the thumbnail)
How to use
```js
import Parallax from 'react-springy-parallax'
// Pages determines the total height of the inner content container
// Each page takes 100% height of the visible outer container by default
// Add as many layers as you like
Layers can contain anything
```
Can the effect be configured or muted?
Yes, you can use anything the Animated library offers: http://browniefed.com/react-native-animation-book
```js
import Animated from 'animated/lib/targets/react-dom'
import Easing from 'animated/lib/Easing'
Animated.timing(animation, { toValue, duration: 200, easing: Easing.elastic(2) })}
... >
```
Or a zero timer for a tame, old-school parallax:
```js
effect={(animation, toValue) =>
Animated.timing(animation, { toValue, duration: 0 })}
```
Is it possible disable the scroll bar for custom page navigation?
Yes. In this mode it will also make sure window-resize retains the last page seen.
You can always use `scrollTo`, scroll bar or not, there is no restriction.
```js
this.parallax = ref}
scrolling={false}
... >
this.parallax.scrollTo(1)}>
Click to get to the next page
```
Does it scroll horizontally as well?
Sure does.
```js
```