diff --git a/site/theme/static/home.less b/site/theme/static/home.less
index c2d0100807..feeb618662 100644
--- a/site/theme/static/home.less
+++ b/site/theme/static/home.less
@@ -81,6 +81,7 @@
   color: rgba(255, 255, 255, .75);
   left: 50%;
   margin-left: -7px;
+  animation: upDownMove 1.2s ease-in-out infinite alternate;
 }
 
 .page {
@@ -164,3 +165,9 @@
   line-height: 28px;
   color: #999;
 }
+
+@keyframes upDownMove {
+  to {
+    transform: translateY(10px);
+  }
+}
diff --git a/site/theme/template/Home/Banner.jsx b/site/theme/template/Home/Banner.jsx
index f644b29afe..d7d4bb864d 100644
--- a/site/theme/template/Home/Banner.jsx
+++ b/site/theme/template/Home/Banner.jsx
@@ -20,7 +20,11 @@ export default function Banner({ location, onEnterChange }) {
   const isZhCN = utils.isZhCN(location.pathname);
   return (
     <section className="page banner-wrapper">
-      <ScrollElement id="banner" onChange={({ mode }) => onEnterChange(mode)}>
+      <ScrollElement
+        className="page" id="banner"
+        onChange={({ mode }) => onEnterChange(mode)}
+        playScale={0.9}
+      >
         <QueueAnim className="banner-text-wrapper" type={typeFunc} delay={300} key="banner">
           <h2 key="h2">ANT <p>DESIGN</p></h2>
           <p key="content"><FormattedMessage id="app.home.slogan" /></p>
diff --git a/site/theme/template/Home/Page1.jsx b/site/theme/template/Home/Page1.jsx
index 07c518bdef..cbf42bfddc 100644
--- a/site/theme/template/Home/Page1.jsx
+++ b/site/theme/template/Home/Page1.jsx
@@ -7,24 +7,9 @@ import { Icon, Button } from 'antd';
 import QueueAnim from 'rc-queue-anim';
 import * as utils from '../utils';
 
-function onScrollEvent(e) {
-  const clientHeight = document.documentElement.clientHeight;
-  const header = document.getElementById('header');
-  if (e.pageY >= clientHeight) {
-    if (header.className.indexOf('home-nav-bottom') < 0) {
-      header.className += ' home-nav-bottom';
-    }
-  } else if (header.className.indexOf('home-nav-bottom') >= 0) {
-    header.className = header.className.replace(/home-nav-bottom/ig, '');
-  }
-}
-
 export default function Page1({ location }) {
   return (
-    <ScrollOverPack id="page1" className="content-wrapper page"
-      replay scrollEvent={onScrollEvent}
-      hideProps={{ image: { reverse: true } }}
-    >
+    <ScrollOverPack id="page1" className="content-wrapper page">
       <TweenOne key="image" className="image1 image-wrapper"
         animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(-100px)', opacity: 0 }}
diff --git a/site/theme/template/Home/Page2.jsx b/site/theme/template/Home/Page2.jsx
index afec54f939..72b8c1f6d9 100644
--- a/site/theme/template/Home/Page2.jsx
+++ b/site/theme/template/Home/Page2.jsx
@@ -10,8 +10,7 @@ import * as utils from '../utils';
 export default function Page2({ location }) {
   return (
     <ScrollOverPack id="page2"
-      className="content-wrapper page" replay
-      hideProps={{ image: { reverse: true } }}
+      className="content-wrapper page"
     >
       <QueueAnim className="text-wrapper left-text" key="text"
         duration={450} type="bottom" leaveReverse
diff --git a/site/theme/template/Home/Page3.jsx b/site/theme/template/Home/Page3.jsx
index 49d4dd8a8a..1dce20d112 100644
--- a/site/theme/template/Home/Page3.jsx
+++ b/site/theme/template/Home/Page3.jsx
@@ -9,9 +9,7 @@ import * as utils from '../utils';
 
 export default function Page3({ location }) {
   return (
-    <ScrollOverPack id="page3" className="content-wrapper page" replay
-      hideProps={{ image: { reverse: true } }}
-    >
+    <ScrollOverPack id="page3" className="content-wrapper page">
       <TweenOne key="image" className="image3 image-wrapper"
         animation={{ x: 0, opacity: 1, ease: 'easeOutQuad' }}
         style={{ transform: 'translateX(-100px)', opacity: 0 }}
diff --git a/site/theme/template/Home/Page4.jsx b/site/theme/template/Home/Page4.jsx
index fe401334d6..1917bff08b 100644
--- a/site/theme/template/Home/Page4.jsx
+++ b/site/theme/template/Home/Page4.jsx
@@ -6,9 +6,7 @@ import QueueAnim from 'rc-queue-anim';
 
 export default function Page4() {
   return (
-    <ScrollOverPack id="page4" className="content-wrapper page"
-      hideProps={{ image: { reverse: true } }}
-    >
+    <ScrollOverPack id="page4" className="content-wrapper page">
       <QueueAnim className="text-wrapper-bottom" key="text"
         leaveReverse type="bottom"
       >
diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
index 8755adb038..57acaf2e6b 100644
--- a/site/theme/template/Home/index.jsx
+++ b/site/theme/template/Home/index.jsx
@@ -94,9 +94,6 @@ function getStyle() {
     #footer a {
       color: #eee;
     }
-    .down {
-      animation: upDownMove 1.2s ease-in-out infinite;
-    }
   `;
 }