add new home

package.json

@@ -70,6 +70,8 @@
     "warning": "~2.1.0"
   },
   "devDependencies": {
+    "rc-scroll-anim": "0.0.5",
+    "rc-tween-one": "0.1.5",
     "autoprefixer-loader": "^3.1.0",
     "babel-cli": "^6.2.0",
     "babel-core": "^6.2.1",

scripts/home.js

@@ -1,8 +1,111 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
+import { QueueAnim, Icon, Button } from '../index';
+import ScrollOverPack from 'rc-scroll-anim/lib/ScrollOverPack';
+import EventDispatcher from 'rc-scroll-anim/lib/EventDispatcher';
+import TweenOne from 'rc-tween-one';
+console.log(EventDispatcher)
+const DivId = ['page4', 'page3', 'page2', 'page1', 'banner'];
+const header = document.getElementById('header');
+DivId.forEach(id=> {
+  const page = document.createElement('section');
+  page.id = id;
+  if (id.indexOf('page') >= 0) {
+    page.className = 'page';
+  }
+  document.body.insertBefore(page, header.nextSibling);
+});
 
+// 导航处理；
+function scrollNavEvent() {
+  const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+  const clientHeight = document.documentElement.clientHeight;
+  if (scrollTop >= clientHeight) {
+    header.className = header.className.indexOf('home-nav-bottom') >= 0 ? header.className : header.className + ' home-nav-bottom';
+  } else {
+    header.className = header.className.replace(/home-nav-bottom/ig, '');
+  }
+}
+
+EventDispatcher.addEventListener('scroll.scrollNavEvent', scrollNavEvent);
+
+class Banner extends React.Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  typeFunc(a) {
+    if (a.key === 'line') {
+      return 'right';
+    } else if (a.key === 'button') {
+      return 'bottom';
+    }
+    return 'left';
+  }
+
+  render() {
+    return (
+      <QueueAnim className="banner-text-wrapper" type={this.typeFunc} delay={300}>
+        <h1 key="h1">ANT DESIGN <p>V1.0</p></h1>
+        <p key="content">一套面向中后台的设计解决方案</p>
+        <span className="line" key="line"/>
+        <a key="button" href="/docs/spec/introduce"><Icon type="smile-circle"/>开始探索</a>
+      </QueueAnim>)
+  }
+}
+
+ReactDOM.render(<Banner />, banner);
+
+
+// page1
 ReactDOM.render((
-  <div className="home-page">
+  <ScrollOverPack className="content-wrapper">
-    首页坑位
+    <TweenOne key="image" className="image1 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
-  </div>
+              style={{transform: 'translateX(-100px)', opacity: 0}}/>
-), document.getElementById('home-container'));
+    <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse>
+      <h1 key="h1">实例/优秀的设计实践</h1>
+      <p key="p" style={{maxWidth: 310}}>近一年的蚂蚁中后台设计实践，积累了大量的优秀案例。</p>
+      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/practice/cases'}}>了解更多<Icon type="right"/></Button></div>
+    </QueueAnim>
+  </ScrollOverPack>
+), page1);
+
+//page2
+ReactDOM.render((
+  <ScrollOverPack className="content-wrapper">
+    <QueueAnim className="text-wrapper left-text" delay={300} key="text" duration={550} type='bottom' leaveReverse>
+      <h1 key="h1">设计模式库</h1>
+      <p key="p" style={{maxWidth: 260}}>为中后台设计中反复出现的问题提供一套相应的解决方案</p>
+      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/pattern/navigation'}}>了解更多<Icon type="right"/></Button></div>
+    </QueueAnim>
+    <TweenOne key="image" className="image2 image-wrapper" vars={{x: 0, opacity: 1, delay: 300, duration: 550}}
+              style={{transform: 'translateX(100px)', opacity: 0}}/>
+  </ScrollOverPack>
+), page2);
+
+//page3
+ReactDOM.render((
+  <ScrollOverPack className="content-wrapper" >
+    <TweenOne key="image" className="image3 image-wrapper" vars={{x: 0, opacity: 1, duration: 550}}
+              style={{transform: 'translateX(-100px)', opacity: 0}}/>
+    <QueueAnim className="text-wrapper" delay={300} key="text" duration={550} leaveReverse style={{top: '40%'}}>
+      <h1 key="h1">30+的基础设计组件</h1>
+      <p key="p" style={{maxWidth: 280}}>为中后台设计中反复出现的问题提供一套相应的解决方案</p>
+      <div key="button"><Button type="primary" size="large" onClick={()=>{window.location.href='/docs/react/introduce'}}>了解更多<Icon type="right"/></Button></div>
+    </QueueAnim>
+  </ScrollOverPack>
+), page3);
+
+
+//page4
+ReactDOM.render((
+  <ScrollOverPack className="content-wrapper" >
+
+    <QueueAnim className="text-wrapper-bottom" delay={300} key="text" duration={550} leaveReverse type="bottom">
+      <h1 key="h1">微小·确定·幸福</h1>
+      <p key="p">为中后台设计中反复出现的问题提供一套相应的解决方案</p>
+    </QueueAnim>
+    <TweenOne key="image" className="image4 bottom-wrapper" vars={{y: 0, opacity: 1, duration: 550, delay: 550}}
+              style={{transform: 'translateY(50px)', opacity: 0}}/>
+  </ScrollOverPack>
+), page4);

site/templates/home.html

@@ -3,13 +3,229 @@
 {% block bodyAttribute %}class="index-page"{% endblock %}
 
 {% block content %}
-<div id="home-container"></div>
 <script src="{{static_url('../dist/home.js')}}"></script>
 <style>
-.home-page {
+  html, body, div, section, {
-  text-align: center;
+    font-family: 'PingFang SC', "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", SimSun, sans-serif;
-  min-height: 560px;
+  }
-  padding-top: 200px;
+
-}
+  header {
+    position: fixed;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.75);
+    border-bottom: 1px solid transparent;
+    transition: border .5s cubic-bezier(0.455, 0.03, 0.515, 0.955), background .5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+
+  .global-hint {
+    display: none;
+  }
+
+  a.logo {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    text-indent: 5px;
+  }
+
+  a.logo img {
+    width: 40px;
+    margin-top: 0;
+  }
+
+  .main-wrapper {
+    display: none;
+  }
+
+  .nav ul li a {
+    transition: color 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+
+  .search {
+    border-left-color: rgba(235, 237, 238, .5);
+    height: 20px;
+    margin-top: 28px;
+    transition: border 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  }
+
+  .search #autoComplete .ant-select-selection {
+    background: transparent;
+  }
+
+  #banner {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    background: url("https://t.alipayobjects.com/images/T1OhFkXfpgXXXXXXXX.png") no-repeat center / cover;
+  }
+
+  .banner-text-wrapper {
+    position: absolute;
+    left: 5%;
+    top: 60%;
+    color: #fff;
+    text-align: right;
+  }
+
+  header.home-nav-bottom {
+    background: rgba(255, 255, 255, 0.9);
+    border-bottom-color: #EBEDEE;
+  }
+
+  .home-nav-bottom .search {
+    border-left-color: #EBEDEE;
+  }
+
+  .home-nav-bottom .nav a {
+    color: #666;
+  }
+
+  .banner-text-wrapper h1 {
+    font-size: 40px;
+    font-weight: normal;
+  }
+
+  .banner-text-wrapper h1 p {
+    color: #FF3171;
+    display: inline-block;
+
+  }
+
+  .banner-text-wrapper .line {
+    width: 1px;
+    height: 80px;
+    position: absolute;
+    background: #fff;
+    top: 10px;
+    right: -25px;
+    opacity: 0.5;
+  }
+
+  .banner-text-wrapper > p {
+    margin: 10px auto 30px;
+    font-size: 16px;
+  }
+
+  .banner-text-wrapper a {
+    float: right;
+    width: 155px;
+    height: 45px;
+    border-radius: 6px;
+    border: 1px solid #00AAEE;
+    color: #00AAEE;
+    font-size: 18px;
+    background: transparent;
+    transition: box-shadow .45s ease-out;
+    text-align: center;
+    line-height: 42px;
+  }
+
+  .banner-text-wrapper a:hover {
+    box-shadow: 0 0 10px #00AAEE;
+  }
+
+  .banner-text-wrapper a span {
+    margin-left: 15px;
+  }
+
+  section {
+    height: 100%;
+    width: 100%;
+    background: #fff;
+  }
+
+  .page {
+    min-height: 700px;
+  }
+
+  .content-wrapper {
+    width: 100%;
+    height: 100%;
+    max-width: 1850px;
+    margin: auto;
+    overflow: hidden;
+  }
+
+  .content-wrapper .image-wrapper {
+    width: 65%;
+    float: left;
+    position: relative;
+  }
+
+  .image1 {
+    background: url("https://t.alipayobjects.com/images/T1Ch8kXfpdXXXXXXXX.png") no-repeat right / 841px;
+    height: 511px;
+    top: 50%;
+    margin-top: -256px;
+  }
+
+  .image2 {
+    background: url("https://t.alipayobjects.com/images/T1r5RkXotXXXXXXXXX.png") no-repeat left / 800px;
+    height: 474px;
+    top: 50%;
+    margin-top: -266px;
+  }
+
+  .image3 {
+    padding-right: 10%;
+    background: url("https://t.alipayobjects.com/images/T1nx0kXdFfXXXXXXXX.png") no-repeat right / 639px;
+    background-origin: content-box;
+    height: 500px;
+    top: 50%;
+    margin-top: -250px;
+  }
+
+  .image4 {
+    background: url("https://t.alipayobjects.com/images/T1lyJkXg4aXXXXXXXX.png") no-repeat center / 615px;
+    height: 364px;
+    margin: auto;
+  }
+
+  .content-wrapper .text-wrapper {
+    width: 35%;
+    float: left;
+    position: relative;
+    top: 20%;
+    left: 10px;
+  }
+
+  .content-wrapper .text-wrapper h1 {
+    font-size: 32px;
+    color: #666;
+  }
+
+  .content-wrapper .text-wrapper p {
+    margin: 10px 0 20px;
+    font-size: 16px;
+    line-height: 28px;
+    color: #999999;
+  }
+
+  .content-wrapper .left-text {
+    padding-left: 10%;
+  }
+
+  .text-wrapper-bottom {
+    text-align: center;
+    margin: 10% auto 40px;
+  }
+
+  .text-wrapper-bottom p {
+    margin: 20px auto;
+    font-size: 16px;
+    line-height: 28px;
+    color: #999999;
+  }
+
+  #footer {
+    background: #000;
+  }
+
+  footer ul li > h2 {
+    color: #656975;
+  }
+  footer ul li > a{
+    color: #BEC4C8
+  }
 </style>
 {% endblock %}

style/themes/default/custom.less

@@ -35,9 +35,9 @@
 @ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
 @ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
 @ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
-@ease-out-back       : cubic-bezier(0.18, 0.89, 0.32, 1.28);
+@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
-@ease-in-back        : cubic-bezier(0.6, -0.3, 0.74, 0.05);
+@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
-@ease-in-out-back    : cubic-bezier(0.68, -0.55, 0.27, 1.55);
+@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
 @ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
 @ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
 @ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);