• Stars
    star
    170
  • Rank 216,479 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated almost 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Animate Banner React Component

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

More Repositories

1

slider

React Slider
JavaScript
2,962
star
2

form

React High Order Form Component(web & react-native)
JavaScript
1,799
star
3

calendar

React Calendar
JavaScript
1,681
star
4

table

React Table
TypeScript
1,183
star
5

tree

React Tree
TypeScript
1,113
star
6

field-form

⚡️ React Performance First Form Component
TypeScript
914
star
7

tooltip

React Tooltip
TypeScript
896
star
8

select

React Select
TypeScript
854
star
9

upload

React Upload
TypeScript
766
star
10

progress

React Progress Bar
TypeScript
678
star
11

animate

anim react element easily
JavaScript
675
star
12

menu

React Menu
TypeScript
655
star
13

virtual-list

🧾 React Virtual List Component which worked with animation
TypeScript
645
star
14

pagination

React Pagination
TypeScript
629
star
15

util

Common Utils For React Component
TypeScript
604
star
16

tabs

React Tabs
TypeScript
540
star
17

queue-anim

Animate React Component in queue
TypeScript
474
star
18

time-picker

React TimePicker
JavaScript
463
star
19

dialog

React Dialog
TypeScript
424
star
20

color-picker

React ColorPicker
TypeScript
419
star
21

m-date-picker

React Mobile DatePicker(web & react-native)
TypeScript
400
star
22

react-component.github.io

docs and site of react-component
HTML
378
star
23

drawer

React Drawer
TypeScript
372
star
24

tween-one

Animate One React Element
TypeScript
370
star
25

notification

React Notification
TypeScript
364
star
26

trigger

Abstract React Trigger
TypeScript
345
star
27

collapse

React Collapse / Accordion
TypeScript
319
star
28

steps

React Steps
TypeScript
311
star
29

scroll-anim

Animate Scroll React Component
JavaScript
301
star
30

input-number

React Input Number
TypeScript
296
star
31

tree-select

React Tree Select
TypeScript
272
star
32

picker

📅 All Date Pickers you need.
TypeScript
253
star
33

m-picker

React Mobile Picker(web & react-native)
TypeScript
246
star
34

swipeout

React Swipeout(web & react-native)
TypeScript
213
star
35

rc-tools

Tools For React Component
JavaScript
205
star
36

cascader

cascade select in one box
TypeScript
198
star
37

switch

React Switch
JavaScript
187
star
38

image

🖼 React Image Component
TypeScript
179
star
39

m-pull-to-refresh

React Mobile Pull To Refresh
TypeScript
166
star
40

dropdown

React Dropdown
TypeScript
163
star
41

texty

React Text Animate
TypeScript
154
star
42

resize-observer

👓 Resize observer for React
JavaScript
153
star
43

m-tabs

React Mobile Tabs Component (web & react-native)
TypeScript
139
star
44

checkbox

React Checkbox
TypeScript
130
star
45

motion

⛷ CSS Animation for React
TypeScript
120
star
46

gesture

Support gesture for react component.
TypeScript
103
star
47

rate

React Rate
JavaScript
91
star
48

form-validation

This project is deprecated, you can try https://github.com/react-component/form
JavaScript
86
star
49

m-list-view

ReactNative ListView Web Port
JavaScript
85
star
50

footer

🐾 Pretty Footer react component used in ant.design
JavaScript
83
star
51

align

Abstract React Align
TypeScript
81
star
52

mentions

React Mentions
TypeScript
67
star
53

rn-packager

Standalone ReactNative Packager
JavaScript
66
star
54

generator-rc

yeoman generator for react component
JavaScript
58
star
55

editor-core

a draft-js based editor
TypeScript
56
star
56

m-drawer

React Drawer
JavaScript
54
star
57

cropping

image cropping
TypeScript
54
star
58

editor-mention

React Mention
JavaScript
53
star
59

m-cascader

React Mobile Cascader Component(web and react-native)
TypeScript
51
star
60

m-dialog

React Mobile Dialog(web & react-native)
TypeScript
45
star
61

spider

React Tree Diagrams
JavaScript
44
star
62

overflow

📦 Auto collapse box util component
TypeScript
42
star
63

css-transition-group

standalone CSSTransitionGroup for React.addons.CSSTransitionGroup
JavaScript
38
star
64

m-calendar

React Mobile Calendar Component (web)
TypeScript
36
star
65

m-feedback

:active pseudo-class with react for mobile
TypeScript
36
star
66

tour

TypeScript
30
star
67

input

React Input Component
TypeScript
29
star
68

pager

React Pager
JavaScript
26
star
69

m-notification

JavaScript
23
star
70

dropzone

React Dropzone
JavaScript
23
star
71

textarea

React Textarea
TypeScript
22
star
72

radio

[DEPRECATED] React Radio
CSS
19
star
73

m-input-number

input-number mobile ui component for react (web & react-native)
TypeScript
17
star
74

portal

TypeScript
16
star
75

touchable

React Touchable Component
TypeScript
16
star
76

rc-server

This project is deprecated, use rc-tools run server
JavaScript
15
star
77

gulp-jsx2example

Compile JSX file to HTML (react demo)
JavaScript
13
star
78

cascade-select

React CascadeSelect
JavaScript
13
star
79

icon-anim

Icon cutover or morph animate React Element
JavaScript
12
star
80

m-select-list

React Mobile Select List Component
JavaScript
12
star
81

segmented

React Segmented Controls
TypeScript
12
star
82

rc-test

test react component
JavaScript
11
star
83

mobile

ant design mobile components
TypeScript
10
star
84

m-tooltip

React Tooltip for mobile
TypeScript
8
star
85

context

TypeScript
7
star
86

rn-tools

tools for react-native
JavaScript
7
star
87

m-trigger

React Trigger Component for mobile
JavaScript
6
star
88

rn-core

Standalone ReactNative Framework
Objective-C
6
star
89

record

Record audio from microphone
JavaScript
5
star
90

.github

5
star
91

RNPlayground

react-native playground container
Objective-C
5
star
92

mutate-observer

TypeScript
5
star
93

editor-plugin-emoji

HTML
4
star
94

m-steps

React Steps for mobile
CSS
4
star
95

editor-plugin-basic-style

TypeScript
3
star
96

mini-decimal

TypeScript
3
star
97

editor-utils

editor utilities
TypeScript
2
star
98

father-plugin

father plugin for all react-component project
TypeScript
1
star
99

editor-plugin-image

TypeScript
1
star