Giter VIP home page Giter VIP logo

banner-anim's Introduction

rc-banner-anim


React BannerAnim Component

NPM version build status Test coverage gemnasium deps node version npm download

Browser Support

IE Chrome Firefox Opera Safari
IE 8+ ✔ 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

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.
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
onChange func - onChange(before or after, currentShowInt)
prefixCls string - user class
children react.component - Element(must), Arrow, Thumb
component string 'div' component tag

Element

children is TweenOne, animation type must from;

name type default description
key string - must
prefixCls string - user class
followParallax object null follow mouse anim
component string 'div' component tag

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 false true is easeInOutQuad
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
id string - must( 0.4.0 key to id, use dom )
className string - className
scrollParallax object null { y: 100 }, scroll Element y to 100
videoResize boolean true children is video, video follow window resize
component string 'div' component tag

Arrow or Thumb

name type default description
key string - must
prefixCls string - user class

banner-anim's People

Contributors

afc163 avatar jljsj33 avatar yxwu25 avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.