React BannerAnim Component
![npm download](https://camo.githubusercontent.com/eda4ee90fc9e0191d73c55f8ecd95d9af9b20d223a2916d16eaefb7afe19210a/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f72632d62616e6e65722d616e696d2e7376673f7374796c653d666c61742d737175617265)
![IE](https://github.com/alrra/browser-logos/raw/master/src/edge/edge_48x48.png?raw=true&raw=true) |
![Chrome](https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_48x48.png?raw=true&raw=true) |
![Firefox](https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_48x48.png?raw=true&raw=true) |
![Opera](https://github.com/alrra/browser-logos/raw/master/src/opera/opera_48x48.png?raw=true&raw=true) |
![Safari](https://github.com/alrra/browser-logos/raw/master/src/safari/safari_48x48.png?raw=true&raw=true) |
IE 10+ ✔ |
Chrome 31.0+ ✔ |
Firefox 31.0+ ✔ |
Opera 30.0+ ✔ |
Safari 7.0+ ✔ |
http://localhost:8012/examples/
online example: http://react-component.github.io/banner-anim/
![rc-banner-anim](https://camo.githubusercontent.com/70249d7ee66166b7a617348154ef8f633e87f35153b2eecaa1f6800fc41884c2/68747470733a2f2f6e6f6465692e636f2f6e706d2f72632d62616e6e65722d616e696d2e706e67)
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);
`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 |
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 |
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. |
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 |
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 |
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 |