Package Exports

rc-scroll-anim
rc-scroll-anim/lib/ScrollElement
rc-scroll-anim/lib/ScrollLink
rc-scroll-anim/lib/ScrollOverPack

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rc-scroll-anim) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

rc-scroll-anim

React ScrollAnim Component

Browser Support


IE 8+ ✔	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

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 vars={{x:100}}>Parallax</ScrollPallax>,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

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
onChange	func	null	change callback({ mode, scrollName }); mode: `enter` or `leave`
location	string	null	v0.6.0 above have,location, the parent id;

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 location 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
replay	boolean	`false`	play every enter, do you want to animate each time you show the current, `false` only scroll to down play animate
appear	boolean	`true`	whether support appear the operation

Parallax

name	type	default	description
animation	object / array	`null`	animation data
location	string	`null`	location, the parent id
always	boolean	`true`	-
component	string	`div`	-

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(easeValue})
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

name	type	default	description
to	string	`null`	need; Specifies the element to top; `Element` the id
toHash	boolean	true	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
onFocus	func	null	check callback,onFocus({target,to})
onBlur	func	null	blur callback
onAsynchronousAddEvent	func	null	Asynchronous add onScroll; callback(function) refs
component	string	`div`	-

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;

Event

var Event = ScrollAnim.Event;
Event.addEventListener('scroll.xxxx',func);
Event.removeEventListener('scroll.xxx',func);