1 | # rc-banner-anim
|
2 | ---
|
3 |
|
4 | React 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 | ```
|
36 | npm install
|
37 | npm start
|
38 | ```
|
39 |
|
40 | ## Example
|
41 |
|
42 | http://localhost:8012/examples/
|
43 |
|
44 |
|
45 | online 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
|
57 | var BannerAnim = require('rc-banner-anim');
|
58 | var React = require('react');
|
59 | const { Element } = BannerAnim;
|
60 | const BgElement = Element.BgElement;
|
61 | React.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 |
|
80 | prev: this.banner.prev();
|
81 |
|
82 | next: this.banner.next();
|
83 |
|
84 | jump: 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` |
|