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</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;

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);

License

evenchange4/scroll-anim

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Error
Looks like something went wrong!

Packages