Skip to content
Easiest way to add scroll parallax effect on the component
Branch: master
Clone or download
keske Merge pull request #9 from JCQuintas/feature/accept-external-props
Parallax element now accepts external props and styles
Latest commit 9b86428 Jul 12, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Done Aug 16, 2016
src use ref assignment to reference element Jul 3, 2017
webpack 1.0.33 Dec 23, 2015
.eslintrc @1.0.4 Mar 23, 2016
.gitignore First example Dec 22, 2015
README.md Done Aug 16, 2016
index.html Done Aug 16, 2016
index.js Prepare module for npm Dec 22, 2015
package.json Add throttle for handleScroll Oct 15, 2016
server.js 1.0.32 Dec 23, 2015

README.md

React Parallax Component

Easiest way to add scroll parallax effect on the component.

image

Installation

npm install react-parallax-component

Usage

import ParallaxComponent from 'react-parallax-component';

<ParallaxComponent
  speed="0.003"
  width="300"
  top="40%"
  left="100"
>
  <div>
    Children component
  </div>
</ParallaxComponent>

Props

  • speed (String) - animation speed, default: -0.03
  • width (String) - component width, default: auto
  • height (String) - component height, default: auto
  • top (String) - component top position, default: inherit
  • left (String) - component left position, default: inherit
  • right (String) - component top position, default: inherit

Development

$ npm install

Run app

$ npm start

And open in browser: http://localhost:4000

Build

$ npm run build
You can’t perform that action at this time.