Merge from master

package.json

@@ -93,6 +93,7 @@
     "extract-text-webpack-plugin": "^0.9.1",
     "gh-pages": "^0.8.0",
     "history": "^1.17.0",
+    "instantclick": "^3.1.0",
     "jest-cli": "~0.8.0",
     "json-loader": "^0.5.1",
     "less": "~2.5.3",
@@ -102,7 +103,7 @@
     "nico-jsx": "~0.7.0",
     "pre-commit": "1.x",
     "rc-form": "^0.8.0",
-    "rc-scroll-anim": "^0.1.0",
+    "rc-scroll-anim": "^0.1.1",
     "rc-tween-one": "^0.1.8",
     "react": "0.14.x",
     "react-addons-test-utils": "0.14.x",
@@ -112,6 +113,7 @@
     "react-stateless-wrapper": "~1.0.2",
     "reqwest": "~2.0.5",
     "semver": "^5.1.0",
+    "values.js": "^1.0.3",
     "webpack": "^1.10.1",
     "webpack-babel-jest": "^1.0.0",
     "webpack-dev-middleware": "^1.2.0"

scripts/demo.js

@@ -37,6 +37,9 @@ window.ReactDOM = ReactDOM;
 window['object-assign'] = require('object-assign');
 window['classnames'] = require('classnames');
 window['reqwest'] = require('reqwest');
+window['Values'] = require('values.js');
+var InstantClick = require('instantclick');
+window['InstantClick'] = InstantClick;
 require('./home')();
 
 antd.DatePicker.locale = {

scripts/home.js

@@ -2,6 +2,8 @@ const React = require('react');
 const ReactDOM = require('react-dom');
 import { QueueAnim, Icon, Button } from '../index';
 import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import ScrollLink from 'rc-scroll-anim/lib/ScrollLink';
+import ScrollElement from 'rc-scroll-anim/lib/ScrollElement';
 import TweenOne from 'rc-tween-one';
 
 module.exports = function() {
@@ -23,6 +25,19 @@ module.exports = function() {
     $(window).off('scroll.scrollNavEvent');
     $(window).on('scroll.scrollNavEvent', scrollNavEvent);
 
+    // list point
+    ReactDOM.render((
+      <div>
+        <ScrollLink className="list-point" location="banner" showHeightActive="50%"/>
+        <ScrollLink className="list-point" location="page1" showHeightActive="50%"/>
+        <ScrollLink className="list-point" location="page2" showHeightActive="50%"/>
+        <ScrollLink className="list-point" location="page3" showHeightActive="50%"/>
+        <ScrollLink className="list-point" location="page4" showHeightActive="50%"/>
+      </div>
+    ), document.getElementById('list'));
+
+    // banner
+
     class Banner extends React.Component {
       constructor() {
         super(...arguments);
@@ -39,7 +54,7 @@ module.exports = function() {
 
       render() {
         return (
-          <div>
+          <ScrollElement scrollName="banner" style={{height: '100%'}}>
             <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
               <h2 key="h2">ANT <p>DESIGN</p></h2>
               <p key="content">一个 UI 设计语言</p>
@@ -49,7 +64,7 @@ module.exports = function() {
             <TweenOne className='down' vars={[{opacity: 1},{y: 10, duration: 800, yoyo: true, repeat: -1}]}>
               <Icon type="down"/>
             </TweenOne>
-          </div>
+          </ScrollElement>
         )
       }
     }
@@ -58,7 +73,7 @@ module.exports = function() {
 
     // page1
     ReactDOM.render((
-      <ScrollOverPack className="content-wrapper">
+      <ScrollOverPack scrollName="page1" className="content-wrapper" playScale={0.4}>
         <TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
                   style={{transform: 'translateX(-100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/>
         <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse
@@ -74,7 +89,7 @@ module.exports = function() {
 
     //page2
     ReactDOM.render((
-      <ScrollOverPack className="content-wrapper">
+      <ScrollOverPack scrollName="page2" className="content-wrapper" playScale={0.4}>
         <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse
                    scrollHideProps={{child: null}}>
           <h2 key="h2">设计模式</h2>
@@ -91,7 +106,7 @@ module.exports = function() {
 
     // page3
     ReactDOM.render((
-      <ScrollOverPack className="content-wrapper">
+      <ScrollOverPack scrollName="page3" className="content-wrapper" playScale={0.4}>
         <TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
                   style={{transform: 'translateX(-100px)', opacity: 0}} scrollHideProps={{type: 'reverse'}}/>
         <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}
@@ -107,7 +122,7 @@ module.exports = function() {
 
     // page4
     ReactDOM.render((
-      <ScrollOverPack className="content-wrapper">
+      <ScrollOverPack scrollName="page4" className="content-wrapper" playScale={0.4}>
         <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom"
                    scrollHideProps={{child: null}}>
           <h2 key="h2">微小·确定·幸福</h2>

site/templates/home.html

@@ -4,6 +4,7 @@
 
 {% block content %}
 <link href="http://fonts.useso.com/css?family=Raleway:600,500,400,300" rel="stylesheet" type="text/css">
+<div id="list"></div>
 <section id="banner"></section>
 <section id="page1" class="page"></section>
 <section id="page2" class="page"></section>
@@ -95,10 +96,10 @@
     height: 76px;
     position: absolute;
     background: rgba(255, 255, 255, .44);
-    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    background-image: -moz-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    background-image: -ms-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
-    background-image: -o-linear-gradient(top, rgba(255,255,255,0.03), rgba(255,255,255,0.6), rgba(255,255,255,0.03));
+    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.03));
     top: 16px;
     right: -25px;
   }
@@ -246,5 +247,30 @@
   footer ul li > a {
     color: #eee;
   }
+
+  #list {
+    position: fixed;
+    z-index: 9998;
+    top: 50%;
+    right: 20px;
+    width: 6px;
+    margin-top: -35px;
+  }
+
+  .list-point {
+    width: 6px;
+    height: 6px;
+    background: #00AAEE;
+    border-radius: 6px;
+    float: left;
+    margin: 4px auto;
+    opacity: 0.5;
+    cursor: pointer;
+    transition: opacity .3s;
+  }
+
+  .list-point:hover, .list-point.active {
+    opacity: 1;
+  }
 </style>
 {% endblock %}

site/templates/layout.html

@@ -18,8 +18,7 @@
     <!--[if IE 8]>
     <script src="https://t.alipayobjects.com/images/rmsweb/T1q8JiXftaXXXXXXXX.js"></script>
     <![endif]-->
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
+    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
-    <script src="https://a.alipayobjects.com/??bluebird/2.9.30/bluebird.js,jquery/jquery/1.11.1/jquery.js"></script>
     <script>
     (function() {
       window.ANT_COMPONENTS = [];
@@ -45,7 +44,6 @@
       };
     </script>
     <script src="{{static_url('../dist/demo.js')}}?20160114"></script>
-    <script src="https://t.alipayobjects.com/images/T1DrxhXe0mXXXXXXXX.js"></script>
     {% block scripts %}{% endblock %}
   </head>
   <body {% block bodyAttribute %}{% endblock %}>
@@ -86,7 +84,6 @@
       {% block aside %}{% endblock %} {% block content %}{% endblock %}
     </div>
     {%- include "footer.html" %}
-    <script src="https://t.alipayobjects.com/images/rmsweb/T1AmXhXg0kXXXXXXXX.js" data-no-instant></script>
     <script data-no-instant>
       InstantClick.on('change', function() {
         InstantClickChangeFns.forEach(function(fn) {