rc-banner-anim
    TypeScript icon, indicating that this package has built-in type declarations

    2.4.5 • Public • Published

    rc-banner-anim


    React BannerAnim Component

    NPM version build status Test coverage node version npm download

    Browser Support

    IE Chrome Firefox Opera Safari
    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

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

    Install

    npm i rc-banner-anim

    DownloadsWeekly Downloads

    1,068

    Version

    2.4.5

    License

    none

    Unpacked Size

    871 kB

    Total Files

    33

    Last publish

    Collaborators

    • jljsj33