From 94bef74e15d60ce1567896f71a7d798087497daf Mon Sep 17 00:00:00 2001
From: huangjinming <huangjinming@kingsome.cn>
Date: Thu, 30 Mar 2023 11:47:43 +0800
Subject: [PATCH] fix

---
 package-lock.json                       | 14 +----
 package.json                            |  3 +-
 src/components/about/Whitepaper.vue     | 14 +++--
 src/components/global/AnimatedTitle.vue | 43 +++++++++++++++
 src/components/global/FadeInText.vue    | 57 ++++++++++++++++++++
 src/components/home/ChipCard.vue        | 70 +++++++++++++++++--------
 src/components/home/GameGallerp.vue     |  5 ++
 src/components/home/WhatCebg.vue        | 31 +++++------
 yarn.lock                               |  9 +---
 9 files changed, 184 insertions(+), 62 deletions(-)
 create mode 100644 src/components/global/AnimatedTitle.vue
 create mode 100644 src/components/global/FadeInText.vue

diff --git a/package-lock.json b/package-lock.json
index 4212024..38eb69c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@animxyz/vue3": "^0.6.7",
         "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
         "@metamask/safe-event-emitter": "^2.0.0",
+        "@vue/runtime-dom": "^3.2.47",
         "@vueuse/core": "^9.12.0",
         "@walletconnect/web3-provider": "^1.8.0",
         "ant-design-vue": "^3.2.15",
@@ -24,7 +25,6 @@
         "postcss-px-to-viewport": "^1.1.1",
         "process": "^0.11.10",
         "rollup-plugin-polyfill-node": "^0.12.0",
-        "scrollama": "^3.2.0",
         "stream-browserify": "^3.0.0",
         "swiper": "8",
         "util": "^0.12.5",
@@ -32,7 +32,6 @@
         "videojs-flash": "^2.2.1",
         "vue": "^3.2.45",
         "vue-3d-loader": "^2.1.5",
-        "vue-demi": "^0.13.11",
         "vue-router": "^4.1.6",
         "web3": "^1.8.2",
         "youtube-player": "^5.6.0"
@@ -1804,7 +1803,6 @@
       "version": "3.2.47",
       "resolved": "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
       "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
-      "license": "MIT",
       "dependencies": {
         "@vue/runtime-core": "3.2.47",
         "@vue/shared": "3.2.47",
@@ -8677,11 +8675,6 @@
         "compute-scroll-into-view": "^1.0.20"
       }
     },
-    "node_modules/scrollama": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/scrollama/-/scrollama-3.2.0.tgz",
-      "integrity": "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
-    },
     "node_modules/scrypt-js": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/scrypt-js/-/scrypt-js-3.0.1.tgz",
@@ -17524,11 +17517,6 @@
         "compute-scroll-into-view": "^1.0.20"
       }
     },
-    "scrollama": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/scrollama/-/scrollama-3.2.0.tgz",
-      "integrity": "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
-    },
     "scrypt-js": {
       "version": "3.0.1",
       "resolved": "https://registry.npmmirror.com/scrypt-js/-/scrypt-js-3.0.1.tgz",
diff --git a/package.json b/package.json
index 2a151dc..ac92439 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@animxyz/vue3": "^0.6.7",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
     "@metamask/safe-event-emitter": "^2.0.0",
+    "@vue/runtime-dom": "^3.2.47",
     "@vueuse/core": "^9.12.0",
     "@walletconnect/web3-provider": "^1.8.0",
     "ant-design-vue": "^3.2.15",
@@ -26,7 +27,6 @@
     "postcss-px-to-viewport": "^1.1.1",
     "process": "^0.11.10",
     "rollup-plugin-polyfill-node": "^0.12.0",
-    "scrollama": "^3.2.0",
     "stream-browserify": "^3.0.0",
     "swiper": "8",
     "util": "^0.12.5",
@@ -34,7 +34,6 @@
     "videojs-flash": "^2.2.1",
     "vue": "^3.2.45",
     "vue-3d-loader": "^2.1.5",
-    "vue-demi": "^0.13.11",
     "vue-router": "^4.1.6",
     "web3": "^1.8.2",
     "youtube-player": "^5.6.0"
diff --git a/src/components/about/Whitepaper.vue b/src/components/about/Whitepaper.vue
index 8983c54..383f64e 100644
--- a/src/components/about/Whitepaper.vue
+++ b/src/components/about/Whitepaper.vue
@@ -13,8 +13,12 @@
       </div>
       <div class="slogan">
         <div>
-          CEBG is the first blockchain-based animation game which consists of
-          Moba, Battleroyal; funded by more than 7 institutional investors.
+          <ScrollAnimatedText>
+            CEBG is the first blockchain-based animation game which consists of
+            Moba, Battleroyal; funded by more than 7 institutional
+            investors.
+            </ScrollAnimatedText
+          >
         </div>
       </div>
       <div class="more">
@@ -27,7 +31,9 @@
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
+</script>
 
 <style lang="scss" scoped>
 .whitepaper {
@@ -81,7 +87,7 @@
       margin-left: 64px;
       padding-bottom: 52px;
       font-size: 18px;
-      font-family: 'Poppins';
+      font-family: "Poppins";
       font-weight: 400;
       color: #ffffff;
       line-height: 26px;
diff --git a/src/components/global/AnimatedTitle.vue b/src/components/global/AnimatedTitle.vue
new file mode 100644
index 0000000..f5cb723
--- /dev/null
+++ b/src/components/global/AnimatedTitle.vue
@@ -0,0 +1,43 @@
+<template>
+    <div class="animated-title">
+      <transition-group name="bounce" tag="div">
+        <span v-for="(char, index) in titleChars" :key="index">{{ char }}</span>
+      </transition-group>
+    </div>
+  </template>
+  
+  <script setup>
+  import { computed } from 'vue';
+  
+  const props = defineProps({
+    title: {
+      type: String,
+      default: ''
+    }
+  });
+  
+  const titleChars = computed(() => props.title.split(''));
+  </script>
+  
+  <style scoped>
+  .bounce-enter-active {
+    animation: bounce-in 0.5s ease;
+  }
+  .bounce-leave-active {
+    animation: bounce-in 0.5s ease reverse;
+  }
+  @keyframes bounce-in {
+    0% {
+      transform: translateY(100%);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(-10%);
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/global/FadeInText.vue b/src/components/global/FadeInText.vue
new file mode 100644
index 0000000..3c90b3d
--- /dev/null
+++ b/src/components/global/FadeInText.vue
@@ -0,0 +1,57 @@
+<template>
+    <span :style="{ fontSize: fontSize, color: textColor }" ref="text">
+      <slot></slot>
+    </span>
+  </template>
+  
+  <script setup>
+  import { defineProps, onMounted, ref } from "vue";
+  
+  const props = defineProps({
+    fontSize: {
+      type: String,
+      default: "16px",
+    },
+    textColor: {
+      type: String,
+      default: "",
+    },
+  });
+  
+  const text = ref(null);
+  
+  const fadeIn = (el) => {
+    el.style.opacity = 0;
+    el.style.transform = "translateY(90px)";
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          el.style.transition = "opacity 2s ease, transform 2s ease";
+          el.style.opacity = 1;
+          el.style.transform = "translateY(0)";
+          observer.disconnect();
+        }
+      });
+    }, {});
+  
+    observer.observe(el);
+  };
+  
+  onMounted(() => {
+    fadeIn(text.value);
+  });
+  </script>
+  
+  <style scoped>
+  span {
+    display: inline-block;
+    font-family: "Poppins";
+    font-weight: bold;
+    line-height: 28px;
+    word-spacing: 2px;
+    background-clip: text;
+    color: black;
+    -webkit-background-clip: text;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/home/ChipCard.vue b/src/components/home/ChipCard.vue
index 91c421e..1c1cc9d 100644
--- a/src/components/home/ChipCard.vue
+++ b/src/components/home/ChipCard.vue
@@ -6,24 +6,48 @@
       </div>
       <div class="container">
         <div class="grid">
-          <div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-01.png" alt="" /></div>
-          <div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-02.png" alt="" /></div>
-          <div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-03.png" alt="" /></div>
-          <div class="grid-item-red"> <img src="@/assets/img/home/chip/red-chip-04.png" alt="" /></div>
+          <div class="grid-item-red">
+            <img src="@/assets/img/home/chip/red-chip-01.png" alt="" />
+          </div>
+          <div class="grid-item-red">
+            <img src="@/assets/img/home/chip/red-chip-02.png" alt="" />
+          </div>
+          <div class="grid-item-red">
+            <img src="@/assets/img/home/chip/red-chip-03.png" alt="" />
+          </div>
+          <div class="grid-item-red">
+            <img src="@/assets/img/home/chip/red-chip-04.png" alt="" />
+          </div>
         </div>
 
         <div class="grid">
-          <div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-01.png" alt="" /></div>
-          <div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-02.png" alt="" /></div>
-          <div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-03.png" alt="" /></div>
-          <div class="grid-item-yellow"> <img src="@/assets/img/home/chip/yellow-chip-04.png" alt="" /></div>
+          <div class="grid-item-yellow">
+            <img src="@/assets/img/home/chip/yellow-chip-01.png" alt="" />
+          </div>
+          <div class="grid-item-yellow">
+            <img src="@/assets/img/home/chip/yellow-chip-02.png" alt="" />
+          </div>
+          <div class="grid-item-yellow">
+            <img src="@/assets/img/home/chip/yellow-chip-03.png" alt="" />
+          </div>
+          <div class="grid-item-yellow">
+            <img src="@/assets/img/home/chip/yellow-chip-04.png" alt="" />
+          </div>
         </div>
 
         <div class="grid">
-          <div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-01.png" alt="" /></div>
-          <div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-02.png" alt="" /></div>
-          <div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-03.png" alt="" /></div>
-          <div class="grid-item-blue"> <img src="@/assets/img/home/chip/blue-chip-04.png" alt="" /></div>
+          <div class="grid-item-blue">
+            <img src="@/assets/img/home/chip/blue-chip-01.png" alt="" />
+          </div>
+          <div class="grid-item-blue">
+            <img src="@/assets/img/home/chip/blue-chip-02.png" alt="" />
+          </div>
+          <div class="grid-item-blue">
+            <img src="@/assets/img/home/chip/blue-chip-03.png" alt="" />
+          </div>
+          <div class="grid-item-blue">
+            <img src="@/assets/img/home/chip/blue-chip-04.png" alt="" />
+          </div>
         </div>
       </div>
     </div>
@@ -39,9 +63,7 @@
   </div>
 </template>
 
-<script setup>
-
-</script>
+<script setup></script>
 
 <style lang="scss" scoped>
 .chip-container {
@@ -100,14 +122,20 @@
       grid-row-gap: 40px;
       width: 370px;
     }
-    .grid-item-red {
-      height: 200px;
-    }
-    .grid-item-yellow {
-      height: 200px;
-    }
+    .grid-item-red,
+    .grid-item-yellow,
     .grid-item-blue {
+      cursor: pointer;
       height: 200px;
+      transition: transform 0.3s; // 添加过渡效果
+      position: relative; // 使 z-index 生效
+      z-index: 1; // 设置 z-index
+    }
+
+    .grid-item-red:hover,
+    .grid-item-yellow:hover,
+    .grid-item-blue:hover {
+      transform: translateY(-12px) scale(1.05); // 鼠标悬停时上移 10px
     }
   }
 }
diff --git a/src/components/home/GameGallerp.vue b/src/components/home/GameGallerp.vue
index 8eb35c1..363ca2c 100644
--- a/src/components/home/GameGallerp.vue
+++ b/src/components/home/GameGallerp.vue
@@ -22,7 +22,9 @@
         </div>
         <div class="slogan">
           <div class="slogan-text">
+            <ScrollAnimatedText>
             Come to be COMMENDER! Enjoy 3D CEBG and fight against other players!
+          </ScrollAnimatedText>
           </div>
         </div>
 
@@ -48,8 +50,10 @@
           <img src="@/assets/img/home/gameplay-bottom-boder.png" alt="" />
         </div>
         <div class="sloagn">
+          <ScrollAnimatedText>
           Undefinable pattern, incredible gaming experience and excited NFT in
           CEBG!
+        </ScrollAnimatedText>
         </div>
         <DameplaySwiperCard></DameplaySwiperCard>
       </div>
@@ -63,6 +67,7 @@
 <script setup>
 import { ref, computed, reactive, onMounted } from "vue";
 import DameplaySwiperCard from "./DameplaySwiperCard.vue";
+import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import GalleryBanner from "./GalleryBanner.vue";
 // 引入swiper样式（按需导入）
diff --git a/src/components/home/WhatCebg.vue b/src/components/home/WhatCebg.vue
index f843dad..b05b5fd 100644
--- a/src/components/home/WhatCebg.vue
+++ b/src/components/home/WhatCebg.vue
@@ -70,19 +70,20 @@
               </div>
               <div class="pve-content">
                 <div class="slogan">
-                  <span class="title">
-                    Each battle contains 40 players by matching </span
-                  ><br />
-                  <span v-if="!isPveTab"
-                    >A player should expect to face the majority or entirety of
+                  <FadeInText class="slogan-title" font-size="24px">
+                    Each battle contains 40 players by matching
+                  </FadeInText>
+                  <br />
+                  <FadeInText v-if="!isPveTab" font-size="16px">
+                    A player should expect to face the majority or entirety of
                     their opponents in the form of computer-controlled
                     opponents.
-                  </span>
-                  <span v-else
-                    >Stands for Player versus Player. It’s a game mode that
+                  </FadeInText>
+                  <FadeInText v-else font-size="16px">
+                    Stands for Player versus Player. It’s a game mode that
                     revolves around layer-against-player combat - combat between
                     actual human players.
-                  </span>
+                  </FadeInText>
                 </div>
               </div>
             </div>
@@ -109,6 +110,8 @@
 
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
+import ScrollAnimatedText from "../global/ScrollAnimatedText.vue";
+import FadeInText from "../global/FadeInText.vue";
 import Text from "./Text.vue";
 import Moster from "./Moster.vue";
 import { gsap } from "gsap";
@@ -147,17 +150,15 @@ function handleScroll() {
   positionY1.value = Y1.value - scrollTop * ratio.value; //原始高度-滚动距离*视差系数
 }
 onMounted(() => {
-  window.addEventListener('scroll', onScroll);
+  window.addEventListener("scroll", onScroll);
   window.addEventListener("scroll", handleScroll); //创建滚动监听，页面滚动回调handleScroll方法
   let bgTest = document.getElementById("bgTest");
 
   Y1.value = bgTest.offsetTop * ratio.value;
 });
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', onScroll);
+  window.removeEventListener("scroll", onScroll);
 });
-
-
 </script>
 
 <style lang="scss" scoped>
@@ -256,7 +257,7 @@ onBeforeUnmount(() => {
       //   left: -190px;
       //   opacity: 1;
       // }
-      
+
       .content-right {
         z-index: 2;
         width: 792px;
@@ -280,7 +281,7 @@ onBeforeUnmount(() => {
           text-align: center;
           font-size: 16px;
           letter-spacing: 2px;
-          font-family: 'Poppins';
+          font-family: "Poppins";
           font-weight: bold;
           color: #ffffff;
         }
diff --git a/yarn.lock b/yarn.lock
index d8e50fe..d65685f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -882,7 +882,7 @@
     "@vue/reactivity" "3.2.47"
     "@vue/shared" "3.2.47"
 
-"@vue/runtime-dom@3.2.47":
+"@vue/runtime-dom@^3.2.47", "@vue/runtime-dom@3.2.47":
   "integrity" "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA=="
   "resolved" "https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz"
   "version" "3.2.47"
@@ -5302,11 +5302,6 @@
   dependencies:
     "compute-scroll-into-view" "^1.0.20"
 
-"scrollama@^3.2.0":
-  "integrity" "sha512-PIPwB1kYBnbw/ezvPBJa5dCN5qEwokfpAkI3BmpZWAwcVID4nDf1qH6WV16A2fQaJmsKx0un5S/zhxN+PQeKDQ=="
-  "resolved" "https://registry.npmmirror.com/scrollama/-/scrollama-3.2.0.tgz"
-  "version" "3.2.0"
-
 "scrypt-js@^3.0.0", "scrypt-js@^3.0.1":
   "integrity" "sha512-cdwTTnqPu0Hyvf5in5asVdZocVDTNRmR7XEcJuIzMjJeSHybHl7vpB66AzwTaIg6CLSbtjcxc8fqcySfnTkccA=="
   "resolved" "https://registry.npmmirror.com/scrypt-js/-/scrypt-js-3.0.1.tgz"
@@ -6114,7 +6109,7 @@
     "three" "^0.143.0"
     "vue" "^3.2.25"
 
-"vue-demi@*", "vue-demi@^0.13.11":
+"vue-demi@*":
   "integrity" "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A=="
   "resolved" "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.11.tgz"
   "version" "0.13.11"