update 0.3.0

react-component · Aug 12, 2016 · 324c5fc · 324c5fc
1 parent 6a8d039
commit 324c5fc
Show file tree

Hide file tree

Showing 18 changed files with 499 additions and 319 deletions.
diff --git a/README.md b/README.md
@@ -84,9 +84,9 @@ React.render(<BannerAnim>
 | autoPlay |      boolean    |      `false`  | auto play |
 | autoPlaySpeed |  number    |    5000       | auto play delay |
 | onChange |     func        |    -          | onChange(`before` or `after`, currentShowInt) |
-| bgParallaxAll |  object    |   null        |  with `bgParallax`, All Element `bgParallax`  |
 | prefixCls |    string      |   -           |  user class |
 | children |  react.component|   -           | `Element`(must), `Arrow`, `Thumb` |
+| component | string | 'div' | component tag        |
 
 ### Element 
 
@@ -96,20 +96,26 @@ React.render(<BannerAnim>
 |----------|-----------------|--------------|-----------------------|
 | key      |     string      |      -       |  must                 |
 | prefixCls |     string      |   -           |  user class |
-| bg      |     string      |    null      |  bg image or video src           |
-| bgType  |      string     |    `img`     |  img or video/xxx     |
-| bgParallax |  object      |   null       |   { y: [0, 300] },  [ scrollTop is 0, page to top ] |
-| bgPrefixCls | string      |   -          | bg 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, scale: number, type: array or string, bgPosition: string }; key: dom key, banner bg key is `bgElem`, scale: Animation value = banner.width / 2 ＊ scale, type: style or `x` `y`, bgPosition: if type is backgroundPosition, this is bg default position, else is invalid. |
+| 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    |
+|----------|-----------------|--------------|-----------------------|
+| key      |  string         | -            |  must                 |
+| 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
 

diff --git a/assets/index.less b/assets/index.less
@@ -8,16 +8,6 @@
     & > * {
       position: relative;
     }
-    &-background {
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      top: 0;
-      left: 0;
-      background-position: center;
-      background-size: cover;
-      overflow: hidden;
-    }
     &-mask {
       position: relative;
       overflow: hidden;

diff --git a/examples/assets/index.less b/examples/assets/index.less
@@ -18,4 +18,12 @@ ul, li {
   .banner-anim-thumb{
     background: #999;
   }
+}
+.banner-anim-elem .bg{
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
 }
diff --git a/examples/autoplay.js b/examples/autoplay.js
@@ -9,31 +9,48 @@ import './assets/index.less';
 import '../assets/index.less';
 
 const { Element } = BannerAnim;
+const BgElement = Element.BgElement;
 class Demo extends React.Component {
   render() {
     return (
       <BannerAnim autoPlay>
         <Element key="aaa"
           prefixCls="banner-user-elem"
-          img="https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} name="TweenOne">
+          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne">
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>
         <Element key="bbb"
           prefixCls="banner-user-elem"
-          img="https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} name="TweenOne">
+          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne">
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>

diff --git a/examples/bgParallax.js b/examples/bgParallax.js
@@ -9,32 +9,50 @@ import './assets/index.less';
 import '../assets/index.less';
 
 const { Element } = BannerAnim;
+const BgElement = Element.BgElement;
 class Demo extends React.Component {
   render() {
     return (
-      <BannerAnim type="across" bgParallaxAll={{ y: [0, 300] }}>
+      <BannerAnim type="across">
         <Element key="aaa"
           prefixCls="banner-user-elem"
-          bgType="video/mp4"
-          bg="https://os.alipayobjects.com/rmsportal/CoDFvoxaQpTnLOM.mp4"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+            scrollParallax={{ y: 100 }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} name="TweenOne">
+          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne">
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>
         <Element key="bbb"
           prefixCls="banner-user-elem"
-          bg="https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+            scrollParallax={{ y: 100 }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} name="TweenOne">
+          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne">
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>

diff --git a/examples/change.js b/examples/change.js
@@ -9,15 +9,24 @@ import './assets/index.less';
 import '../assets/index.less';
 
 const { Element } = BannerAnim;
+const BgElement = Element.BgElement;
 class Demo extends React.Component {
   constructor() {
     super(...arguments);
 
     this.state = {
       children: [<Element key="aaa"
         prefixCls="banner-user-elem"
-        img="https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg"
       >
+        <BgElement
+          key="bg"
+          className="bg"
+          style={{
+            backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg)',
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+          }}
+        />
         <QueueAnim name="QueueAnim">
           <h1 key="h1">Ant Motion Demo</h1>
           <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
@@ -28,8 +37,16 @@ class Demo extends React.Component {
       </Element>,
         <Element key="bbb"
           prefixCls="banner-user-elem"
-          img="https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
@@ -49,8 +66,15 @@ class Demo extends React.Component {
       children.push(
         <Element key="ccc"
           prefixCls="banner-user-elem"
-          img="https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
+              backgroundSize: 'cover',
+            }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>

diff --git a/examples/customAnimType.js b/examples/customAnimType.js
@@ -33,31 +33,48 @@ animType.custom = (elem, type, direction, animData) => {
 };
 
 const { Element } = BannerAnim;
+const BgElement = Element.BgElement;
 class Demo extends React.Component {
   render() {
     return (
       <BannerAnim type="custom">
         <Element key="aaa"
           prefixCls="banner-user-elem"
-          img="https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/IhCNTqPpLeTNnwr.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} name="TweenOne">
+          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne">
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>
         <Element key="bbb"
           prefixCls="banner-user-elem"
-          img="https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg"
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: 'url(https://os.alipayobjects.com/rmsportal/uaQVvDrCwryVlbb.jpg)',
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} name="TweenOne">
+          <TweenOne animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }} name="TweenOne">
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>

diff --git a/examples/customArrow.js b/examples/customArrow.js
@@ -10,6 +10,7 @@ import './assets/arrow.less';
 import '../assets/index.less';
 
 const { Element, Arrow } = BannerAnim;
+const BgElement = Element.BgElement;
 class Demo extends React.Component {
   constructor() {
     super(...arguments);
@@ -82,25 +83,49 @@ class Demo extends React.Component {
       <BannerAnim onChange={this.onChange}>
         <Element key="aaa"
           prefixCls="banner-user-elem"
-          img={this.imgArray[0]}
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: `url(${this.imgArray[0]})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim key="1" name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} key="2" name="TweenOne">
+          <TweenOne
+            animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }}
+            key="2"
+            name="TweenOne"
+          >
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>
         <Element key="bbb"
           prefixCls="banner-user-elem"
-          img={this.imgArray[1]}
         >
+          <BgElement
+            key="bg"
+            className="bg"
+            style={{
+              backgroundImage: `url(${this.imgArray[1]})`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'center',
+            }}
+          />
           <QueueAnim key="1" name="QueueAnim">
             <h1 key="h1">Ant Motion Demo</h1>
             <p key="p">Ant Motion Demo.Ant Motion Demo.Ant Motion Demo.Ant Motion Demo</p>
           </QueueAnim>
-          <TweenOne animation={{ y: 50, opacity: 0, type: 'from' }} key="2" name="TweenOne">
+          <TweenOne
+            animation={{ y: 50, opacity: 0, type: 'from', delay: 200 }}
+            key="2"
+            name="TweenOne"
+          >
             Ant Motion Demo.Ant Motion Demo
           </TweenOne>
         </Element>
@@ -125,7 +150,7 @@ class Demo extends React.Component {
           animation={{ right: this.state.nextEnter ? 0 : -120 }}
         >
           <div className="arrow"></div>
-          <TweenOneGroup enter={{ opacity: 0, type: 'from' }} leave={{ opacity: 0 }}
+          <TweenOneGroup enter={{ opacity: 0, type: 'from', delay: 200 }} leave={{ opacity: 0 }}
             className="img-wrapper" component="ul"
           >
             <li