Skip to content
🌊 A springy, composable parallax-scroller for React - deprecated
Branch: master
Clone or download
Latest commit 096e4b1 Mar 22, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist horizontal scroll Mar 20, 2018
example horizontal scroll Mar 20, 2018
.babelrc update to animated 0.2.1, which fixes react 16 compat. add webpack to… Nov 9, 2017
.gitignore update package.json Apr 9, 2017
LICENSE license Mar 25, 2017
README.md Update README.md Mar 22, 2018
index.js horizontal scroll Mar 20, 2018
intro.gif readme Mar 21, 2017
package.json horizontal scroll Mar 20, 2018
yarn.lock horizontal scroll Mar 20, 2018

README.md

*** 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 can’t perform that action at this time.