rc-scroll-anim v2.7.6
rc-scroll-anim
React ScrollAnim Component
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/
Feature
- support ie8,ie8+,chrome,firefox,safari
install
Usage
ScrollOverPack
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(<ScrollOverPack>
<QueueAnim key='queueAnim'>
<div key='a'>enter</div>
<div key='b'>enter</div>
<div key='b'>enter</div>
</QueueAnim>
<TweenOne key='tweenOne' vars={{x:100}}>one element</TweenOne>
<Animate key='rc-animate' transitionName="fade" transitionAppear>rc-animate</Animate>
</ScrollOverPack>, container);
Parallax
var ScrollParallax = ScrollAnim.Parallax;
React.render(<ScrollParallax animation={{x:100}}>Parallax</ScrollParallax>,container);
Link, Element
var Link = ScrollAnim.Link;
var Element = ScrollAnim.Element;
React.render(<div>
<div className="nav">
<Link className="nav-list" to="page0">nav0</Link>
<Link className="nav-list" to="page1">nav1</Link>
</div>
<Element className="pack-page" id="page0">demo</Element>
<Element className="pack-page" id="page1">demo</Element>
</div>,container);
scrollScreen
ScrollAnim.scrollScreen.init();
ScrollAnim.scrollScreen.unMount();
API
中文文档
props
Element
Element
orOverPack
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 |
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 (playScale0) callback; |
onComplete | function | - | scroll down animate completed (playScale1) callback |
onStartBack | function | - | scroll up animate start (playScale1) callback; |
onCompleteBack | function | - | scroll up animate completed (playScale0) callback; |
animation = {},{} is timeline;
Link
v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo
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
var Event = ScrollAnim.Event;
Event.addEventListener('scroll.xxxx',func);
Event.removeEventListener('scroll.xxx',func);
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago