🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

*** 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)

intro

How to use

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 <Parallax ref='parallax' pages={3}>      // Add as many layers as you like     <Parallax.Layer         // Page offset, or where the layer will be at when scrolled to         // 0 means start, 1 second page, 1.5 second and half, and so on ...         offset={0}         // Parallax factor, allows for positive and negative values         // Shifts the layer up or down in accordance to its offset         speed={0.5}>          <span>Layers can contain anything</span>      </Parallax.Layer>  </Parallax>

Can the effect be configured or muted?

Yes, you can use anything the Animated library offers: http://browniefed.com/react-native-animation-book

import Animated from 'animated/lib/targets/react-dom' import Easing from 'animated/lib/Easing'  <Parallax     effect={(animation, toValue) =>         Animated.timing(animation, { toValue, duration: 200, easing: Easing.elastic(2) })}     ... >

Or a zero timer for a tame, old-school parallax:

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.

<Parallax     ref={ref => this.parallax = ref}     scrolling={false}     ... >     <Parallax.Layer>         <div onClick={() => this.parallax.scrollTo(1)}>             Click to get to the next page

Does it scroll horizontally as well?

Sure does.

<Parallax horizontal ... >

You May Also Like