Need help with banner-anim?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

react-component
165 Stars 36 Forks MIT License 165 Commits 13 Opened issues

Description

Animate Banner React Component

Services available

!
?

Need anything else?

Contributors list

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(
  
    
    test text
  
  
    
    test text
  
, container);

API

BannerAnim

`ref` control jump:  { 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
|

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.