react-parallax-effect
Advanced tools
Comparing version 1.0.1 to 1.0.3
{ | ||
"name": "react-parallax-effect", | ||
"version": "1.0.1", | ||
"version": "1.0.3", | ||
"description": "A React component for applying a parallax scroll to content.", | ||
"main": "react-parallax-effect.js", | ||
"main": "index.js", | ||
"scripts": { | ||
@@ -7,0 +7,0 @@ "test": "echo \"Error: no test specified\" && exit 1", |
@@ -1,4 +0,4 @@ | ||
## React Parallax | ||
## React Parallax Effect | ||
Parallax is a React component designed for deploying content into a view that relies on srolling for navigation. The content can be arranged in layers that mimic the parallax effect, and move at different velocities while scrolling. Layers are assigned by passing them in as children to the component. The first child node determines the scrolling range and motion of its siblings. The parallax differential is determined by the rangeIndex property assigned to each child. The value of the rangeIndex determines the magnitude of the speed differential applied to the layer. Callbacks are abailable for onReady and onChange, and a jumpTo() method is used to adjuste the scroll location of the first child. The effect presents the designer and user creative ways for presenting and interacting content. | ||
React-Parallax-Effect is a React component designed for deploying content into a view that relies on srolling for navigation. The content can be arranged in layers that mimic the parallax effect, and move at different velocities while scrolling. Layers are assigned by passing them in as children to the component. The first child node determines the scrolling range and motion of its siblings. The parallax differential is determined by the rangeIndex property assigned to each child. The value of the rangeIndex determines the magnitude of the speed differential applied to the layer. Callbacks are abailable for onReady and onChange, and a jumpTo() method is used to adjuste the scroll location of the first child. The effect presents the designer and user creative ways for presenting and interacting content. | ||
@@ -17,18 +17,19 @@ ### Features | ||
### Repository | ||
[https://github.com/uismithing/react-parallax](https://github.com/uismithing/react-parallax) | ||
[https://github.com/uismithing/react-parallax-effect](https://github.com/uismithing/react-parallax-effect) | ||
### Install | ||
`npm install react-parallax -s` | ||
`npm install react-parallax-effect -s` | ||
### Deploy | ||
`import Parallax from "react-parallax"` | ||
`import Parallax from "react-parallax-effect"` | ||
```html | ||
<Parallax ref="reactparallax" {...props}> | ||
<!-- | ||
- parallax children | ||
- rangeIndex must be >= 1 | ||
- the first child assumes scroll authority af sibling child layers | ||
- rangeIndex determines the scroll speed; e.g. rangeIndex=2 scrolls half the speed of rangeIndex=1 | ||
--> | ||
<div ref="layer_0" rangeIndex="1"> | ||
<!-- | ||
- layer children | ||
- rangeIndex must be >= 1 | ||
- the first child assumes scroll authority af all child layers | ||
- rangeIndex determines the scroll speed; e.g. rangeIndex=2 scrolls half the speed of rangeIndex=1 | ||
--> | ||
<!-- layer children --> | ||
</div> | ||
@@ -35,0 +36,0 @@ <div ref="layer_1" rangeIndex="2"> |
33091
47