Demo/style

README.md

@@ -87,8 +87,8 @@ React.render(<div>
     <Link className="nav-list" to="page0">nav0</Link>
     <Link className="nav-list" to="page1">nav1</Link>
   </div>
-  <Element className="pack-page" name="page0">示例</Element>
-  <Element className="pack-page" name="page1">示例</Element>
+  <Element className="pack-page" scrollName="page0">示例</Element>
+  <Element className="pack-page" scrollName="page1">示例</Element>
 </div>,container);
 ```
 
@@ -103,6 +103,7 @@ React.render(<div>
 | component | string         | `div`   | 组件标签        |
 | playScale | number         | `0.5`   | 开始播放的屏幕百分比, 0.5 为屏幕中间 |
 | always    | boolean        | `true`  | 到否重复播放，如为 false 将只进入一遍，不再触发出场效果 |
+| scrollName| string         | `null`  | 需要定位的名称，parallax的 location 或 link 的 location, 都需要以此元素做定位 |
 
 #### 子级动画支持 `rc-queue-anim` `rc-animte` `rc-tween-one`
 
@@ -114,8 +115,9 @@ React.render(<div>
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
 | vars      | object / array | `null`  | 组件动效数据     |
-| position  | string         | `null`  | 定位,`Element`的 name 值，必需是唯一的|
+| location  | string         | `null`  | 定位,`Element`的 name 值，必需是唯一的|
 | always    | boolean        | `true`  | 同上            |
+| scrollName| string         | `null`  | 需要定位的名称，parallax的 location 或 link 的 location, 都需要以此元素做定位 |
 | component | string         | `div`   | 同上            |
 
 #### vars = { }
@@ -132,7 +134,7 @@ React.render(<div>
 ### Link
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
-| to        | string         | `null`  | 必需; 指定元素到达顶部; `Element` 的 name 值, 元素必需是唯一的 |
+| location  | string         | `null`  | 必需; 指定元素到达顶部; `Element` 的 name 值, 元素必需是唯一的 |
 | duration  | number         | `450`   | 点击滚动动画的时间 |
 | ease      | string         | `easeInOutQuad` | 动画缓动 | 
 | active    | string         | `active`| 选中时的样式    |
@@ -146,9 +148,10 @@ React.render(<div>
 
 | name      | type           | default | description    |
 |-----------|----------------|---------|----------------|
-| name      | string         | null    | 需要定位的名称，parallax的 position 或 link 的 to, 都需要以此元素做定位 |
+| scrollName | string         | null    | 需要定位的名称，parallax的 location 或 link 的 location, 都需要以此元素做定位 |
 | component | string         | `div`   | 同上            |
 
+> 注: 如果元素不是以上组件时，需要定位到此元素上时，请用 `Element`
 
 ### Event 
 ```jsx

assets/index.less

@@ -1,7 +1,15 @@
 @zero: 0;
+//all css
+h1 {
+  margin: 13px;
+}
+p {
+  margin: 0px;
+}
 .pack-page {
   width: 100%;
-  height: 800px;
+  height: 720px;
+  background-color: #0098CE;
 }
 
 .motion-common() {
@@ -67,33 +75,80 @@
 }
 
 // link css
+
 .nav {
   position: fixed;
-  background: rgba(0, 0, 0, .85);
+  background: #0098CE;
   color: #fff;
   width: 100%;
-  height: 80px;
+  height: 58px;
   z-index: 9999;
   top: 0;
+  & .nav-wap{
+    float: right;
+  }
   & .nav-list {
     width: 100px;
     height: 100%;
     float: left;
-    line-height: 80px;
+    line-height: 58px;
     text-align: center;
     cursor: pointer;
     transition: background .45s;
     &:hover, &.active {
-      background: #333;
+      background: #0180AD;
     }
   }
   & .nav-bar {
     width: 100px;
     position: absolute;
-    top: 78px;
+    top: 58px;
     left: 0;
     height: 2px;
-    background: #ff73fd;
+    background: #fff;
     transition: left .3s;
   }
+}
+.page0{
+  padding-top: 300px;
+  margin: 0 auto;
+  width: 100%;
+  text-align: center;
+}
+.page1{
+  background-color:#19436E;
+  height:720px;
+}
+
+.tween-one{
+  width:100%;
+  opacity: 0;
+  color:#fff;
+  font-size:32px;
+  padding-top: 100px;
+  text-align: center;
+  padding-bottom: 50px;
+}
+.demo{
+  margin: 0 auto;
+  width: 600px;
+  height: 80px;
+  background-color: #133252;
+  margin-top: 30px;
+  border-radius: 4px;
+}
+
+
+.page-title{
+  & p{
+    font-size: 50px;
+    color: #fff;
+  }
+}
+.page-description{
+  padding-top: 20px;
+  & p{
+    font-size: 18px;
+    color: #fff;
+  }
 }

examples/link.js

@@ -11,79 +11,91 @@ import Animate from 'rc-animate';
 const Link = ScrollAnim.Link;
 const Element = ScrollAnim.Element;
 const ScrollOverPack = ScrollAnim.OverPack;
+const EventListener = ScrollAnim.Event;
 
 class Demo extends React.Component {
   constructor() {
     super(...arguments);
   }
 
+  componentDidMount() {
+    // 添加改变窗口事件,可加setTimeout
+    EventListener.addEventListener('resize.userResize', this.barAnimate.bind(this));
+  }
+
   onFocus(e) {
-    const dom = e.target;
-    this.barAnimate(dom);
+    this.dom = e.target;
+    this.barAnimate();
   }
 
-  barAnimate(dom) {
+  barAnimate() {
+    if (!this.dom) {
+      return;
+    }
     const bar = this.refs.bar;
-    bar.style.left = dom.getBoundingClientRect().left + 'px';
+    bar.style.left = this.dom.getBoundingClientRect().left + 'px';
   }
 
   render() {
     return (<div>
       <div className="nav">
-        <Link className="nav-list" to="page0" showHeightActive="300"
-              onFocus={this.onFocus.bind(this)}>page0</Link>
-        <Link className="nav-list" to="page1" showHeightActive={[300, 500]}
-              onFocus={this.onFocus.bind(this)}>page1</Link>
-        <Link className="nav-list" to="page2" showHeightActive={[500, 200]} toShowHeight
-              onFocus={this.onFocus.bind(this)}>page2</Link>
-        <Link className="nav-list" to="page3" showHeightActive={[200, '10%']}
-              onFocus={this.onFocus.bind(this)}>page3</Link>
-        <div ref="bar" className="nav-bar"></div>
+        <div className="nav-wap">
+          <Link className="nav-list" location="page0" showHeightActive="300" ref="page0"
+                onFocus={this.onFocus.bind(this)}>Page0</Link>
+          <Link className="nav-list" location="page1" showHeightActive={[300, 500]}
+                onFocus={this.onFocus.bind(this)}>Page1</Link>
+          <Link className="nav-list" location="page2" showHeightActive={[500, 200]} toShowHeight
+                onFocus={this.onFocus.bind(this)}>Page2</Link>
+          <Link className="nav-list" location="page3" showHeightActive={[200, '10%']}
+                onFocus={this.onFocus.bind(this)}>Page3</Link>
+          <div ref="bar" className="nav-bar"></div>
+        </div>
       </div>
-      <Element className="pack-page" name="page0">
-        <div>我是内容</div>
-        <div>我是内容</div>
-        <div>我是内容</div>
-      </Element>
-      <Element name="page1">
-        <ScrollOverPack style={{backgroundColor: '#fff000', height: 800}}>
-          <TweenOne key="0" vars={{opacity: 1}}
-                    style={{width: '100%', opacity: 0, textAlign: 'center', color: '#fff', fontSize: 32}}
-                    scrollHideProps={{type: 'reverse'}}>默认进入与出场</TweenOne>
-          <QueueAnim key="1" scrollHideProps={{child: null}}>
-            <div key="0">示例示例</div>
-            <div key="1">示例示例</div>
-            <div key="2">示例示例</div>
-            <div key="3">示例示例</div>
-          </QueueAnim>
-        </ScrollOverPack>
+      <Element className="pack-page page0" scrollName="page0">
+        <QueueAnim>
+          <div className="page-title" key="title">
+            <p>rc-scroll-anim@0.1.0</p>
+          </div>
+          <div className="page-description" key="c">
+            <p>A simple demo</p>
+          </div>
+        </QueueAnim>
       </Element>
+      <ScrollOverPack scrollName="page1" className="page1">
+        <TweenOne className="tween-one" key="0" vars={{opacity: 1}}
+                  scrollHideProps={{type: 'reverse'}}>默认进入与出场
+        </TweenOne>
+        <QueueAnim key="1" scrollHideProps={{child: null}}>
+          <div key="0" className="demo"></div>
+          <div key="1" className="demo"></div>
+          <div key="2" className="demo"></div>
+          <div key="3" className="demo"></div>
+        </QueueAnim>
+      </ScrollOverPack>
 
-      <Element name="page2">
-        <ScrollOverPack className="pack-page" style={{backgroundColor: '#128303'}} always={false} id="page2">
-          <div style={{width: '100%', textAlign: 'center', color: '#fff', fontSize: 32}}>只进入一次</div>
-          <Animate key="0" transitionName="fade" transitionAppear scrollHideProps={{child: null}}>
-            <div>Animate示例示例</div>
-          </Animate>
-          <TweenOne vars={{x: 200, opacity: 1}} style={{opacity: 0, width: 100}} key="1"
-                    scrollHideProps={{type: 'reverse'}}>
-            单元素用例
-          </TweenOne>
-        </ScrollOverPack>
-      </Element>
+      <ScrollOverPack scrollName="page2" className="pack-page page2" style={{backgroundColor: '#0097D0'}} always={false}
+                      id="page2">
+        <div style={{width: '100%', textAlign: 'center', color: '#fff', fontSize: 32}}>只进入一次</div>
+        <Animate key="0" transitionName="fade" transitionAppear scrollHideProps={{child: null}}>
+          <div>Animate示例示例</div>
+        </Animate>
+        <TweenOne vars={{x: 200, opacity: 1}} style={{opacity: 0, width: 100}} key="1"
+                  scrollHideProps={{type: 'reverse'}}>
+          单元素用例
+        </TweenOne>
+      </ScrollOverPack>
 
-      <Element name="page3">
-        <ScrollOverPack className="pack-page" style={{backgroundColor: '#00ffff'}} playScale={0.8} id="page3">
-          <div style={{width: '100%', textAlign: 'center', color: '#fff', fontSize: 32}}>在页面80％时进入</div>
-          <Animate key="0" transitionName="fade" transitionAppear scrollHideProps={{child: null}}>
-            <div>Animate示例示例</div>
-          </Animate>
-          <TweenOne vars={{x: 200, opacity: 1}} style={{opacity: 0, width: 100}} key="1"
-                    scrollHideProps={{type: 'reverse'}}>
-            单元素用例
-          </TweenOne>
-        </ScrollOverPack>
-      </Element>
+      <ScrollOverPack scrollName="page3" className="pack-page page3" style={{backgroundColor: '#174270'}}
+                      playScale={0.8} id="page3">
+        <div style={{width: '100%', textAlign: 'center', color: '#fff', fontSize: 32}}>在页面80％时进入</div>
+        <Animate key="0" transitionName="fade" transitionAppear scrollHideProps={{child: null}}>
+          <div>Animate示例示例</div>
+        </Animate>
+        <TweenOne vars={{x: 200, opacity: 1}} style={{opacity: 0, width: 100}} key="1"
+                  scrollHideProps={{type: 'reverse'}}>
+          单元素用例
+        </TweenOne>
+      </ScrollOverPack>
     </div>);
   }
 }

examples/parallax.js

@@ -65,11 +65,11 @@ class Demo extends React.Component {
       </div>
       <ScrollElement style={{height: 2000}} name="Scroll-Pack">
         <ScrollParallax className="pack-page"
-                        position="Scroll-Pack"
+                        location="Scroll-Pack"
                         vars={{backgroundColor: '#ddff00', playScale: [1, 2], onStart: this.setCss.bind(this), onComplete: this.onComplete.bind(this)}}
                         style={this.state.css}>
           <ScrollParallax vars={[{translateY: 0}, {translateY: '500px'}]}
-                          position="Scroll-Pack"
+                          location="Scroll-Pack"
                           style={{transform: 'translateY(300px)', color: '#fff', fontSize: 36}}>示例示例</ScrollParallax>
         </ScrollParallax>
       </ScrollElement>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rc-scroll-anim",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "scroll-anim anim component for react",
   "keywords": [
     "react",

src/ScrollElement.jsx

@@ -5,11 +5,13 @@ import mapped from './Mapped';
 class ScrollElement extends React.Component {
   componentDidMount() {
     const domNode = ReactDOM.findDOMNode(this);
-    mapped.register(this.props.name, domNode);
+    if (this.props.scrollName) {
+      mapped.register(this.props.scrollName, domNode);
+    }
   }
 
   componentWillUnmount() {
-    mapped.unregister(this.props.name);
+    mapped.unregister(this.props.scrollName);
   }
 
   render() {
@@ -19,7 +21,7 @@ class ScrollElement extends React.Component {
 const funcOrString = React.PropTypes.oneOfType([React.PropTypes.func, React.PropTypes.string]);
 ScrollElement.propTypes = {
   component: funcOrString,
-  name: React.PropTypes.string,
+  scrollName: React.PropTypes.string,
 };
 
 ScrollElement.defaultProps = {

src/ScrollLink.jsx

@@ -48,7 +48,7 @@ class ScrollLink extends React.Component {
   onClick(e) {
     e.preventDefault();
     const docRect = document.documentElement.getBoundingClientRect();
-    const elementDom = mapped.get(this.props.to);
+    const elementDom = mapped.get(this.props.location);
     const elementRect = elementDom.getBoundingClientRect();
     this.scrollTop = window.pageYOffset;
     const toTop = Math.round(elementRect.top) - Math.round(docRect.top);
@@ -80,9 +80,9 @@ class ScrollLink extends React.Component {
 
   scrollEventListener() {
     const docRect = document.documentElement.getBoundingClientRect();
-    const elementDom = mapped.get(this.props.to);
+    const elementDom = mapped.get(this.props.location);
     if (!elementDom) {
-      throw new Error('"to" is null');
+      throw new Error('"location" is null');
     }
     const elementRect = elementDom.getBoundingClientRect();
     const elementClientHeight = elementDom.clientHeight;
@@ -95,7 +95,7 @@ class ScrollLink extends React.Component {
       if (!this.props.onFocus.only) {
         const obj = {
           target: this.dom,
-          to: this.props.to,
+          location: this.props.location,
         };
         this.props.onFocus.call(this, obj);
         this.props.onFocus.only = true;
@@ -107,7 +107,7 @@ class ScrollLink extends React.Component {
       if (this.props.onFocus.only) {
         const obj = {
           target: this.dom,
-          to: this.props.to,
+          location: this.props.location,
         };
         this.props.onBlur.call(this, obj);
       }
@@ -143,7 +143,7 @@ ScrollLink.propTypes = {
   style: objectOrArray,
   duration: React.PropTypes.number,
   active: React.PropTypes.string,
-  to: React.PropTypes.string,
+  location: React.PropTypes.string,
   showHeightActive: stringOrNumberOrArray,
   toShowHeight: React.PropTypes.bool,
   ease: React.PropTypes.string,