2.7.6 • Published 5 years ago

rc-scroll-anim v2.7.6

Weekly downloads
9,966
License
-
Repository
github
Last release
5 years ago

rc-scroll-anim


React ScrollAnim Component

NPM version build status Test coverage node version npm download

Browser Support

IEChromeFirefoxOperaSafari
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

rc-scroll-anim

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 or OverPack must set height;

nametypedefaultdescription
componentstringdiv-
idstringnullneed to location the id,parallax the location or link the to, need to use
targetIdstringnullscroll target id, if don't window scroll, parent element is overflow: scroll, use parent id to do scroll; demo refs
playScalenumber / array / string0.5percentage of screen to start play, screen center is 0.5, if replay is true : bottomEnter, topLeave, topLeave >= bottomEnter
replaybooleanfalseplay every enter, do you want to animate each time you show the current, false only scroll to down play animate
onChangefuncnullchange callback({ mode, id }); mode: enter or leave
onScrollfuncnullscroll callback({ domEvent, showHeight, offsetTop, scrollTop, id }).
locationstringnullv0.6.0 above have,location, the parent id;
componentPropsobjectnullcomponent 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;

nametypedefaultdescription
alwaysbooleantrueback to top, enter replay,as false will only play it again, leave does not play
appearbooleantruewhether support appear the operation
componentPropsobjectnullcomponent props.

Parallax

nametypedefaultdescription
animationobject / arraynullanimation data
locationstringnulllocation, the parent id
alwaysbooleantrue-
targetIdstringnullrefer Element targetId
componentstringdiv-
componentPropsobjectnullcomponent props.

animation = { }

nametypedefaultdescription
playScalearray[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
easestringeaseInOutQuadanimation easing string
onUpdatefunction-animate updates, callback: onUpdate(percent)
onStartfunction-scroll down animate start (playScale0) callback;
onCompletefunction-scroll down animate completed (playScale1) callback
onStartBackfunction-scroll up animate start (playScale1) callback;
onCompleteBackfunction-scroll up animate completed (playScale0) callback;

animation = {},{} is timeline;

Link

v1.1.0 remove onAsynchronousAddEvent. Asynchronous demo

v2.3.0 toHash default is false;

nametypedefaultdescription
tostringnullneed; Specifies the element to top; Element the id
toHashbooleanfalseadd to to the location.hash
durationnumber450scroll animate duration
easestringeaseInOutQuadanimation easing string
activestringactiveselected className
showHeightActivestring / number / array50%enter: the element offset top 50% add active, leave: the element in the window 50% remove active; is array enter, leave;
toShowHeightbooleanfalsescroll to showHeightActive
offsetTopnumber0scroll to elem top offset
targetIdstringnullrefer Element targetId
onFocusfuncnullcheck callback,onFocus({target,to})
onBlurfuncnullblur callback
componentstringdiv-
componentPropsobjectnullcomponent props.

ScrollAnim.scrollScreen.init(vars)

Use: scroll a screen window;

vars = { }

nametypedefaultdescription
locationarray[]llocation of scrolling screen, only element ID is supported in array
durationnumber450scroll duration
easestringeaseInOutQuadeasing
docHeightnumbernullCustom html height
loopbooleanfalseBefore and after the phase cycle
scrollIntervalnumber1000rolling 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);
2.7.6

5 years ago

2.7.5

5 years ago

2.7.4

6 years ago

2.7.3

6 years ago

2.7.2

6 years ago

2.7.1

6 years ago

2.7.0

6 years ago

2.6.3

6 years ago

2.6.2

6 years ago

2.6.1

6 years ago

2.6.0

6 years ago

2.5.9

6 years ago

2.5.8

6 years ago

2.5.7

6 years ago

2.5.6

7 years ago

2.5.6-beta.4

7 years ago

2.5.6-beta.3

7 years ago

2.5.6-beta.2

7 years ago

2.5.6-beta.1

7 years ago

2.5.6-beta.0

7 years ago

2.5.5

7 years ago

2.5.4

7 years ago

2.5.3

7 years ago

2.5.2

7 years ago

2.5.1

7 years ago

2.5.0

7 years ago

2.4.1

7 years ago

2.4.0

7 years ago

2.3.3

7 years ago

2.3.2

7 years ago

2.3.1

7 years ago

2.3.0

7 years ago

2.2.1

8 years ago

2.2.0

8 years ago

2.1.0

8 years ago

2.0.2

8 years ago

2.0.1

8 years ago

2.0.0

8 years ago

1.0.7

8 years ago

1.0.6

8 years ago

1.0.5

8 years ago

1.0.4

8 years ago

1.0.3

8 years ago

1.0.2

8 years ago

1.0.1

8 years ago

1.0.0

8 years ago

0.6.5

8 years ago

0.6.4

8 years ago

0.6.3

8 years ago

0.6.2

9 years ago

0.6.1

9 years ago

0.6.0

9 years ago

0.5.3

9 years ago

0.5.2

9 years ago

0.5.1

9 years ago

0.5.0

9 years ago

0.4.1

9 years ago

0.4.0

9 years ago

0.3.9

9 years ago

0.3.8

9 years ago

0.3.7

9 years ago

0.3.6

9 years ago

0.3.5

9 years ago

0.3.4

9 years ago

0.3.3

9 years ago

0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.11

9 years ago

0.2.10

9 years ago

0.2.9

9 years ago

0.2.8

9 years ago

0.2.7

9 years ago

0.2.6

9 years ago

0.2.4

9 years ago

0.2.3

9 years ago

0.2.2

9 years ago

0.2.1

9 years ago

0.2.0

9 years ago

0.1.9

9 years ago

0.1.8

10 years ago

0.1.7

10 years ago

0.1.6

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago