https://github.com/react-component/scroll-anim
Animate Scroll React Component
https://github.com/react-component/scroll-anim
react-animation scroll-anim scroll-animations
Last synced: 9 months ago
JSON representation
Animate Scroll React Component
- Host: GitHub
- URL: https://github.com/react-component/scroll-anim
- Owner: react-component
- License: mit
- Created: 2015-12-25T05:49:27.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2021-07-26T21:14:55.000Z (over 4 years ago)
- Last Synced: 2024-10-30T02:29:50.237Z (about 1 year ago)
- Topics: react-animation, scroll-anim, scroll-animations
- Language: JavaScript
- Homepage: http://react-component.github.io/scroll-anim/
- Size: 5.54 MB
- Stars: 305
- Watchers: 23
- Forks: 43
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
- License: LICENSE.md
Awesome Lists containing this project
README
# rc-scroll-anim
---
React ScrollAnim Component
[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]
[npm-image]: http://img.shields.io/npm/v/rc-scroll-anim.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-scroll-anim
[travis-image]: https://img.shields.io/travis/react-component/scroll-anim.svg?style=flat-square
[travis-url]: https://travis-ci.org/react-component/scroll-anim
[coveralls-image]: https://img.shields.io/coveralls/react-component/scroll-anim.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/react-component/scroll-anim?branch=master
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/rc-scroll-anim.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-scroll-anim
## Browser Support
| |  |  |  | |
| --- | --- | --- | --- | --- |
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
## Development
```
npm install
npm start
```
## Example
http://localhost:8020/examples/
http://react-component.github.io/scroll-anim/
http://ant.design/
## Feature
* support ie8,ie8+,chrome,firefox,safari
## install
[](https://npmjs.org/package/rc-scroll-anim)
## Usage
#### ScrollOverPack
```js
var ScrollAnim = require('rc-scroll-anim');
var ScrollOverPack = ScrollAnim.OverPack;
var React = require('react');
// ScrollOverPack support rc-animate,rc-queue-anim,rc-tween-one;
React.render(
enter
enter
enter
one element
rc-animate
, container);
```
#### Parallax
```js
var ScrollParallax = ScrollAnim.Parallax;
React.render(Parallax,container);
```
#### Link, Element
```js
var Link = ScrollAnim.Link;
var Element = ScrollAnim.Element;
React.render(
nav0
nav1
demo
demo
,container);
```
### scrollScreen
```js
ScrollAnim.scrollScreen.init();
ScrollAnim.scrollScreen.unMount();
```
## API
### props
### Element
> `Element` or `OverPack` must set height;
| name | type | default | description |
|-----------|----------------|---------|----------------|
| component | string | `div` | - |
| id | string | null | need to location the id，parallax the `location` or link the `to`, need to use |
| targetId | string | null | scroll target id, if don't window scroll, parent element is `overflow: scroll`, use parent id to do scroll; [demo refs](http://react-component.github.io/scroll-anim/examples/target.html) |
| playScale | number / array / string | `0.5` | percentage of screen to start play, screen center is 0.5, if replay is true : [bottomEnter, topLeave]， topLeave >= bottomEnter |
| replay | boolean | `false` | play every enter, do you want to animate each time you show the current, `false` only scroll to down play animate |
| onChange | func | null | change callback({ mode, id }); mode: `enter` or `leave` |
| onScroll | func | null | scroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }). |
| location | string | null | v0.6.0 above have,location, the parent id; |
| componentProps | object | null | component props. |
> Note: if the element is not the above component, you need to location this element; please use the `Element`
### OverPack
OverPack inherit Element; `component` `playScale` `onChange` `onScroll` `location` `replay` refer to `Element`;
> 1.0.0 remove hideProps;
| name | type | default | description |
|-----------|----------------|---------|----------------|
| always | boolean | `true` | back to top, enter replay，as `false` will only play it again, leave does not play |
| appear | boolean | `true` | whether support appear the operation |
| componentProps | object | null | component props. |
### Parallax
| name | type | default | description |
|-----------|----------------|---------|----------------|
| animation | object / array | `null` | animation data |
| location | string | `null` | location, the parent id |
| always | boolean | `true` | - |
| targetId | string | null | refer Element `targetId` |
| component | string | `div` | - |
| componentProps | object | null | component props. |
#### animation = { }
| name | type | default | description |
|-----------|----------------|---------|----------------|
| playScale | array | `[0, 1]`| play area, [start, end]
timeline: `[{playScale: [0, 0.2]}, {playScale: [0, 0.8]}]]`, Second will increase by 0.2, The second end is 1 |
| ease | string | `easeInOutQuad`| animation easing string |
| onUpdate | function | - | animate updates, callback: onUpdate(percent) |
| onStart | function | - | scroll down animate start (playScale[0]) callback; |
| onComplete| function | - | scroll down animate completed (playScale[1]) callback |
| onStartBack | function | - | scroll up animate start (playScale[1]) callback; |
| onCompleteBack | function | - | scroll up animate completed (playScale[0]) callback; |
> animation = [{},{}] is timeline;
### Link
> v1.1.0 remove onAsynchronousAddEvent. [Asynchronous demo](http://react-component.github.io/scroll-anim/examples/linkAsynchronous.html)
> v2.3.0 toHash default is false;
| name | type | default | description |
|-----------|----------------|---------|----------------|
| to | string | `null` | need; Specifies the element to top; `Element` the id |
| toHash | boolean | false | add `to` to the `location.hash` |
| duration | number | `450` | scroll animate duration |
| ease | string | `easeInOutQuad` | animation easing string |
| active | string | `active`| selected className |
| showHeightActive| string / number / array | `50%` | enter: the element offset top `50%` add `active`, leave: the element in the window `50%` remove `active`; is array [enter, leave]; |
| toShowHeight | boolean | false | scroll to `showHeightActive` |
| offsetTop | number | 0 | scroll to elem top offset |
| targetId | string | null | refer Element `targetId` |
| onFocus | func | null | check callback,onFocus({target,to}) |
| onBlur | func | null | blur callback |
| component | string | `div` | - |
| componentProps | object | null | component props. |
### ScrollAnim.scrollScreen.init(vars)
Use: scroll a screen window;
#### vars = { }
| name | type | default | description |
|-----------|----------------|---------|----------------|
| location | array | [] | llocation of scrolling screen, only element ID is supported in array |
| duration | number | 450 | scroll duration |
| ease | string | `easeInOutQuad` | easing |
| docHeight | number | null | Custom html height |
| loop | boolean | false | Before and after the phase cycle |
| scrollInterval | number | 1000 | rolling interval time |
### ScrollAnim.scrollScreen.unMount()
Clear a screen scrolling effect;
### Event
```jsx
var Event = ScrollAnim.Event;
Event.addEventListener('scroll.xxxx',func);
Event.removeEventListener('scroll.xxx',func);
```