UNPKG

7.31 kBMarkdownView Raw
1# rc-banner-anim
2---
3
4React BannerAnim Component
5
6
7[![NPM version][npm-image]][npm-url]
8[![build status][travis-image]][travis-url]
9[![Test coverage][coveralls-image]][coveralls-url]
10[![node version][node-image]][node-url]
11[![npm download][download-image]][download-url]
12
13[npm-image]: http://img.shields.io/npm/v/rc-banner-anim.svg?style=flat-square
14[npm-url]: http://npmjs.org/package/rc-banner-anim
15[travis-image]: https://img.shields.io/travis/react-component/banner-anim.svg?style=flat-square
16[travis-url]: https://travis-ci.org/react-component/banner-anim
17[coveralls-image]: https://img.shields.io/coveralls/react-component/banner-anim.svg?style=flat-square
18[coveralls-url]: https://coveralls.io/r/react-component/banner-anim?branch=master
19[gemnasium-image]: http://img.shields.io/gemnasium/react-component/banner-anim.svg?style=flat-square
20[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
21[node-url]: http://nodejs.org/download/
22[download-image]: https://img.shields.io/npm/dm/rc-banner-anim.svg?style=flat-square
23[download-url]: https://npmjs.org/package/rc-banner-anim
24
25
26## Browser Support
27
28|![IE](https://github.com/alrra/browser-logos/blob/master/src/edge/edge_48x48.png?raw=true) | ![Chrome](https://github.com/alrra/browser-logos/blob/master/src/chrome/chrome_48x48.png?raw=true) | ![Firefox](https://github.com/alrra/browser-logos/blob/master/src/firefox/firefox_48x48.png?raw=true) | ![Opera](https://github.com/alrra/browser-logos/blob/master/src/opera/opera_48x48.png?raw=true) | ![Safari](https://github.com/alrra/browser-logos/blob/master/src/safari/safari_48x48.png?raw=true)|
29| --- | --- | --- | --- | --- |
30| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
31
32
33## Development
34
35```
36npm install
37npm start
38```
39
40## Example
41
42http://localhost:8012/examples/
43
44
45online example: http://react-component.github.io/banner-anim/
46
47
48## install
49
50
51[![rc-banner-anim](https://nodei.co/npm/rc-banner-anim.png)](https://npmjs.org/package/rc-banner-anim)
52
53
54## Usage
55
56```js
57var BannerAnim = require('rc-banner-anim');
58var React = require('react');
59const { Element } = BannerAnim;
60const BgElement = Element.BgElement;
61React.render(<BannerAnim>
62 <Element key="a">
63 <BGElement key="bg" style={{ background: 'url(img)' }}/>
64 <TweenOne key='0'>test text</TweenOne>
65 </Element>
66 <Element key="b">
67 <BGElement key="bg" style={{ background: 'url(img)' }}/>
68 <TweenOne key='0'>test text</TweenOne>
69 </Element>
70</BannerAnim>, container);
71```
72
73## API
74
75### BannerAnim
76
77```
78`ref` control jump: <BannerAnim ref={(c) => { this.banner = c; }}/>
79
80prev: this.banner.prev();
81
82next: this.banner.next();
83
84jump: this.banner.slickGoTo(number); number from 0;
85```
86
87| name | type | default | description |
88|----------|-----------------|--------------|-----------------------|
89| type | string / array | All animType | Provide `across`, `vertical`, `acrossOverlay`, `verticalOverlay`, (`gridBar`, `grid`) => duration is a single block of animation time, video bg no use |
90| duration | number | 450 | Single switch time. |
91| delay | number | 0 | switch delay. |
92| ease | string | `easeInOutQuad` | easing. |
93| initShow | number | 0 | start show |
94| arrow | boolean | `true` | `Arrow` is children, this is null and void. else is default arrow |
95| thumb | boolean | `true` | ^ |
96| autoPlay | boolean | `false` | auto play |
97| autoPlaySpeed | number | 5000 | auto play delay |
98| autoPlayEffect | boolean | `true` | auto play when mouse leave |
99| onChange | func | - | onChange(`before` or `after`, currentShowInt) |
100| prefixCls | string | - | user class |
101| children | react.component| - | `Element`(must), `Arrow`, `Thumb` |
102| sync | boolean | false | `Element` the children and `Element` the same time animation |
103| dragPlay | boolean | true | drag play next or prev |
104| component | string | 'div' | component tag |
105
106### Element
107
108> children is `TweenOne`, animation type must `from`;
109
110| name | type | default | description |
111|----------|-----------------|--------------|-----------------------|
112| leaveChildHide | boolean | false | children leave switch animation. Replace the `hideProps`.|
113| sync | boolean | false | children and `Element` the same time animation |
114| prefixCls | string | - | user class |
115| followParallax | object | null | follow mouse anim |
116| component | string | 'div' | component tag |
117| componentProps | object | null | component is React.Element, component tag props, not add `style` |
118
119#### followParallax is object
120| name | type | default | description |
121|----------|-----------------|--------------|-----------------------|
122| delay | number | null | open followParallax delay |
123| 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. |
124| ease | string | `easeOutQuad` | animate ease. [refer](http://easings.net/en) |
125| 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. |
126
127### Element.BgElement
128
129| name | type | default | description |
130|----------|-----------------|--------------|-----------------------|
131| className | string | - | className |
132| scrollParallax | object | null | { y: 100 }, from bottom to top of browser, element leave display area y is 100 |
133| videoResize | boolean | true | children is video, video follow window resize |
134| component | string | 'div' | component tag |
135| componentProps | object | null | component is React.Element, component tag props, not add `style` |
136
137### Arrow
138
139| name | type | default | description |
140|----------|-----------------|--------------|-----------------------|
141| arrowType | 'prev' \| 'next' | - | arrow type |
142| prefixCls | string | - | user class |
143| component | string / React.Element | `div` | component tag |
144| componentProps | object | null | component is React.Element, component tag props, not add `style` |
145
146### Thumb
147
148| name | type | default | description |
149|----------|-----------------|--------------|-----------------------|
150| children | React.Element | - | must |
151| prefixCls | string | - | user class |
152| component | string / React.Element | `div` | component tag |
153| componentProps | object | null | component is React.Element, component tag props, not add `style` |