scroll-anim
React ScrollAnim Component.
Development
npm install
npm start
Feature
- support ie8,ie8+,chrome,firefox,safari
install
Usage
ScrollOverPack
Parallax
Link, Element
scrollScreen
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 (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
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 |
---|---|---|---|
duration | number | 450 | scroll duration |
ease | string | easeInOutQuad |
easing |
docHeight | number | null | default to HTML height, when body or html the height: 100%, page height can not be obtained, need their own definition |
loop | boolean | false | Before and after the phase cycle |
scrollInterval | number | 1000 | rolling interval time |
ScrollAnim.scrollScreen.unMount()
Clear a screen scrolling effect;