vin0010/banner-anim

Animate Banner React Component

rc-banner-anim

---

React BannerAnim 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:8012/examples/

online example: http://react-component.github.io/banner-anim/

install

Usage

var BannerAnim = require('rc-banner-anim');
var React = require('react');
const { Element } = BannerAnim;
const BgElement = Element.BgElement;
React.render(<BannerAnim>
  <Element key="a">
    <BGElement key="bg" style={{ background: 'url(img)' }}/>
    <TweenOne key='0'>test text</TweenOne>
  </Element>
  <Element key="b">
    <BGElement key="bg" style={{ background: 'url(img)' }}/>
    <TweenOne key='0'>test text</TweenOne>
  </Element>
</BannerAnim>, container);

API

BannerAnim

`ref` control jump: <BannerAnim ref={(c) => { this.banner = c; }}/>

prev: this.banner.prev();

next: this.banner.next();

jump: this.banner.slickGoTo(number); number from 0;

name	type	default	description
type	string / array	All animType	Provide across, vertical, acrossOverlay, verticalOverlay, (gridBar, grid) => duration is a single block of animation time, video bg no use
duration	number	450	Single switch time.
delay	number	0	switch delay.
ease	string	easeInOutQuad	easing.
initShow	number	0	start show
arrow	boolean	true	Arrow is children, this is null and void. else is default arrow
thumb	boolean	true	^
autoPlay	boolean	false	auto play
autoPlaySpeed	number	5000	auto play delay
autoPlayEffect	boolean	true	auto play when mouse leave
onChange	func	-	onChange(before or after, currentShowInt)
prefixCls	string	-	user class
children	react.component	-	Element(must), Arrow, Thumb
sync	boolean	false	Element the children and Element the same time animation
dragPlay	boolean	true	drag play next or prev
component	string	'div'	component tag

Element

children is TweenOne, animation type must from;

name	type	default	description
leaveChildHide	boolean	false	children leave switch animation. Replace the hideProps.
sync	boolean	false	children and Element the same time animation
prefixCls	string	-	user class
followParallax	object	null	follow mouse anim
component	string	'div'	component tag
componentProps	object	null	component is React.Element, component tag props, not add style

followParallax is object

name	type	default	description
delay	number	null	open followParallax delay
data	array	null	content: { key: string, value: number, type: array or string, bgPosition: string }; key: children key; value: animation interval value, example: value is 20 => [left: -20, center: 0 , right: 20] ; type: style or x y, bgPosition: if type is backgroundPosition, this is bg default position, else is invalid.
ease	string	easeOutQuad	animate ease. refer
minMove	number	null	ease.easeInOutQuad(start, minMove, 1, end); The mouse to move once, the minimum point of moving graphics, a second to reach the position of the mouse.

Element.BgElement

name	type	default	description
className	string	-	className
scrollParallax	object	null	{ y: 100 }, from bottom to top of browser, element leave display area y is 100
videoResize	boolean	true	children is video, video follow window resize
component	string	'div'	component tag
componentProps	object	null	component is React.Element, component tag props, not add style

Arrow

name	type	default	description
arrowType	'prev' | 'next'	-	arrow type
prefixCls	string	-	user class
component	string / React.Element	div	component tag
componentProps	object	null	component is React.Element, component tag props, not add style

Thumb

name	type	default	description
children	React.Element	-	must
prefixCls	string	-	user class
component	string / React.Element	div	component tag
componentProps	object	null	component is React.Element, component tag props, not add style