视差效果

MORIOM70 · Mar 15, 2021 · e51c814 · e51c814
1 parent c6f231f
commit e51c814
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "i18next": "^19.9.1",
     "i18next-browser-languagedetector": "^6.0.1",
     "node-sass": "^5.0.0",
+    "parallax-js": "^3.1.0",
     "react": "^17.0.1",
     "react-bootstrap": "^1.5.1",
     "react-dom": "^17.0.1",

diff --git a/src/page/Home/index.js b/src/page/Home/index.js
@@ -1,7 +1,9 @@
+import { useRef, useEffect } from 'react';
 import {
     Button,
     // Container, Row, Col
 } from 'react-bootstrap';
+import Parallax from "parallax-js";
 import { useTranslation } from 'react-i18next';
 
 import styles from './style.module.scss';
@@ -27,19 +29,29 @@ import desktopParticipate01 from './img/participate-content-01.png';
 import desktopParticipate02 from './img/participate-content-02.png';
 
 const Home = () => {
+    const ref = useRef();
     const { i18n } = useTranslation();
 
     const DesktopTitleCN = (
-        <div className={styles.containerTitleCN}>
+        <div data-depth="0.2" className={styles.containerTitleCN}>
             <div className={styles.title}>Crab Network</div>
             <div className={styles.subtitle}>KUSAMA 的跨链枢纽</div>
         </div>
     );
 
     const DesktopTitleEN = (
-        <img alt='crab title' src={desktopCrabTitleImg} className={styles.crabTitleImgDesktop} />
+        <img data-depth="0.2" alt='crab title' src={desktopCrabTitleImg} className={styles.crabTitleImgDesktop} />
     );
 
+    useEffect(() => {
+        if (ref.current) {
+            new Parallax(ref.current, {
+                hoverOnly: true,
+                pointerEvents: true,
+            });
+        }
+    }, [ref]);
+
     return (
         <div className={styles.container}>
             <PageHeader />
@@ -48,8 +60,10 @@ const Home = () => {
                 <img alt='crab' src={mobileCrabImg} className={styles.crabImg} />
                 <img alt='crab title' src={mobileCrabTitleImg} className={styles.crabTitleImg} />
 
-                <img alt='crab' src={desktopCrabImg} className={styles.crabImgDesktop} />
-                {i18n.language && i18n.language.toLowerCase() === 'en-us' ? DesktopTitleEN : DesktopTitleCN}
+                <div className={styles.parallaxContainer} ref={ref} >
+                    <img data-depth="0.1" alt='crab' src={desktopCrabImg} className={styles.crabImgDesktop} />
+                    {i18n.language && i18n.language.toLowerCase() === 'en-us' ? DesktopTitleEN : DesktopTitleCN}
+                </div>
 
                 <div className={styles.crabNetDesc}>
                     Crab Network (Crab for short) is a Canary Network for Darwinia. The positioning of Crab is similar to Polkadot’s Kusama Network. Expect Chaos is a reasonable expectation

diff --git a/src/page/Home/style.module.scss b/src/page/Home/style.module.scss
@@ -253,25 +253,32 @@
                 display: none;
             }
 
+            .parallaxContainer {
+                overflow: hidden;
+            }
+
             .crabImgDesktop {
-                display: inline;
+                display: block;
                 position: absolute;
-                top: 92px;
-                right: 0;
+                left: 48% !important;
+                right: 0 !important;
+                top: 72px !important;
             }
 
             .crabTitleImgDesktop {
-                display: inline;
+                display: block;
                 position: absolute;
-                top: 280px;
-                left: 10%;
+                left: 10% !important;
+                right: auto !important;
+                top: 260px !important;
             }
 
             .containerTitleCN {
-                display: inline;
+                display: block;
                 position: absolute;
-                top: 280px;
-                left: 10%;
+                top: 280px !important;
+                left: 10% !important;
+                border: 1px solid red;
 
                 .title {
                     // width: 1046px;
@@ -307,7 +314,7 @@
                 font-family: IBMPlexSans;
                 color: #6330DD;
                 line-height: 33px;
-                margin-top: 560px;
+                margin-top: 0px;
                 margin-left: 10%;
                 text-align: start;
             }

diff --git a/yarn.lock b/yarn.lock
@@ -8315,6 +8315,14 @@ pako@~1.0.5:
   resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
   integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
 
+parallax-js@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npm.taobao.org/parallax-js/download/parallax-js-3.1.0.tgz#cc8a5d7dd5e2529b94b9a34f3d4cd13a22eb049e"
+  integrity sha1-zIpdfdXiUpuUuaNPPUzROiLrBJ4=
+  dependencies:
+    object-assign "^4.1.1"
+    raf "^3.3.0"
+
 parallel-transform@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/parallel-transform/-/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
@@ -9461,7 +9469,7 @@ queue-microtask@^1.2.2:
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.2.tgz#abf64491e6ecf0f38a6502403d4cda04f372dfd3"
   integrity sha512-dB15eXv3p2jDlbOiNLyMabYg1/sXvppd8DP2J3EOCQ0AkuSXCW2tP7mnVouVLJKgUMY6yP0kcQDVpLCN13h4Xg==
 
-raf@^3.4.1:
+raf@^3.3.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==