rc-banner-anim

Animate Banner React Component.

View demo Download Source

Development

npm install
npm start

Example

http://localhost:8012/examples/

install

rc-banner-anim

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
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
key string - must
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

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
id string - must( 0.4.0 key to id, use dom )
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

Arrow or Thumb

name type default description
key string - must
prefixCls string - user class

GitHub