feats

src/components/Animate.vue

@@ -0,0 +1,28 @@
+<template>
+  <component
+    :is="comp || 'div'"
+    class="animate__animated"
+    :class="{ [name]: ready }"
+    :style="style"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    comp: undefined,
+    name: String,
+    delay: String,
+    ready: Boolean
+  })
+
+  const style = computed(() => {
+    return {
+      animationDelay: props.delay || 0,
+      visibility: props.ready ? 'visible' : 'hidden',
+    }
+  });
+</script>

src/components/Bell.vue

@@ -1,16 +1,26 @@
 <template>
-  <div class="bell-box">
+  <div class="bell-box" @click="toggle">
     <div>
-      <div class="center circle abs"><div class="inner" /></div>
-      <div class="center circle abs"><div class="outer" /></div>
+      <div class="center circle abs">
+        <div class="inner" :class="{'circle-ani': animate}" />
+      </div>
+      <div class="center circle abs">
+        <div class="outer" :class="{'circle-ani': animate}" />
+      </div>
       <div class="center bell-img">
-        <img src="/images/pg1/bell.png" alt="">
+        <img :class="{'bell-ani': animate}" src="/images/pg1/bell.png" alt="">
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { computed, ref } from 'vue';
+import { useModel } from '@zjxpcyc/vue-tiny-store';
+
+const { toggle, state } = useModel('audio');
+const animate = computed(() => state.value === 1);
+
 </script>
 
 <style lang="less" scoped>
@@ -48,12 +58,20 @@
       opacity: 0;
     }
 
+    .circle-ani {
+      animation-name: bell-circle-show;
+    }
+
     .inner {
-      animation: bell-circle-show 3s linear infinite;
+      animation-duration: 3s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
     }
 
-    .outer {      
-      animation: bell-circle-show 3s linear 1.5s infinite;
+    .outer {
+      animation-duration: 1.5s;
+      animation-timing-function: linear;
+      animation-iteration-count: infinite;
     }
 
     @keyframes bell-circle-show {
@@ -77,12 +95,19 @@
     position: relative;
     z-index: 2;
 
+    .bell-ani {
+      animation-name: bell-shake;
+    }
+
     img {
       flex: none;
       width: 80%;
 
       transform-origin: top center;
-      animation: bell-shake 1.4s ease-in-out infinite alternate;
+      animation-duration: 1.4s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
     }
   }
 

src/pages/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <div style="height: 100vh">
+  <div style="height: 100vh;">
+    <Bell class="bell abs" />
     <div class="pages slide-container">
       <div class="slide-page-2">
         <Pg1 class="container"/>
@@ -17,6 +18,7 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { useModel } from '@zjxpcyc/vue-tiny-store';
+import Bell from '@/components/Bell.vue';
 import Pg1 from './pg1/index.vue';
 import Pg2 from './pg2/index.vue';
 import Pg3 from './pg3/index.vue';
@@ -46,6 +48,13 @@ onMounted(() => {
 </script>
 
 <style lang="less">
+
+.bell {
+  right: 30px;
+  top: 30px;
+  z-index: 100;
+}
+
 .pages {
   position: relative;
   overflow-y: auto;

src/pages/pg1/index.vue

@@ -3,19 +3,21 @@
     <div class="conent">
       <div class="header">        
         <Logo class="logo" />
-        <Bell class="bell" />
       </div>
-      <div class="body">
+      <div class="body" parallax-offset='-100'>
         <Part1 class="part1" @clickImg="onClickImg" />
         <Part2 class="part2" />
         <Part3 class="part3" />
       </div>
     </div>
     <div class="footer abs animate__animated animate__fadeInUp" style="animation-delay: 4s">
-      <img src="/images/pg1/stele.png" alt="" parallax-offset='-100'>
+      <img src="/images/pg1/stele.png" alt="" parallax-offset='-200'>
+    </div>
+    <div class="footer stele2 animate__animated animate__fadeInUp" style="animation-delay: 4s">
+      <img src="/images/pg1/stele2.png" alt="" parallax-offset='-230'>
     </div>
     <div class="footer abs animate__animated animate__fadeInUp" style="animation-delay: 4.5s">
-      <img src="/images/pg1/wall.png" alt="" parallax-offset='-100'>
+      <img src="/images/pg1/wall.png" alt="" parallax-offset='-250'>
     </div>
   </div>
 </template>
@@ -35,9 +37,6 @@
     router.push('/bk1');
   }
 
-  onMounted(() => {
-  })
-
 </script>
 
 <style lang="less" scoped>
@@ -75,4 +74,12 @@
     width: 100vw;
     z-index: 10;
   }
+
+  .stele2 {
+    position: absolute;
+    left: auto;
+    right: 0;
+    bottom: 0;
+    width: 32vw;
+  }
 </style>

src/pages/pg2/index.vue

@@ -1,17 +1,29 @@
 <template>
-  <div class="page pg-bg pg2" parallax>
-    <Bell class="bell abs" />
+  <div class="page pg-bg pg2" parallax ref="pgRef">
     <Cloud class="cloud abs" />
     <div class="content txt">
-      <p class="step animate__animated animate__lightSpeedInRight" data-delay="100">
+      <Animate
+        comp="p"
+        name="animate__lightSpeedInRight"
+        delay="100ms"
+        :ready="show"
+      >
         1939年 <br >
         <strong>一抹紫色</strong>在战争的废墟中……
-      </p>
-      <img class="story step animate__animated animate__fadeInDown" data-delay="600" src="/images/pg2/story.png" alt="">
+      </Animate>
+      <Animate
+        class="story"
+        comp="img"
+        name="animate__fadeInDown"
+        delay="600ms"
+        src="/images/pg2/story.png"
+        alt=""
+        :ready="show"
+      />
     </div>
 
     <div class="hill abs">
-      <img src="/images/pg2/mountain.png" alt="" parallax-offset="-100">
+      <img class="" src="/images/pg2/mountain.png" alt="" parallax-offset="-100">
     </div>
     
     <div class="groups abs">
@@ -19,28 +31,57 @@
         <img class="stele" src="/images/pg2/stele.png" alt="" parallax-offset="-150">
         <div parallax-offset="-300" >
           <img class="ruins" src="/images/pg2/ruins.png" alt="">
-          <Smoke class="smoke abs" />
+          <!-- <Smoke class="smoke abs" /> -->
         </div>
         <img class="persons" src="/images/pg2/persons.png" alt="" parallax-offset="-500">
       </div>
     </div>
 
-    <div class="flower abs" parallax-offset="-500">
-      <Flower1 class="flower1 abs" />
-      <Flower2 class="flower2 abs" />
-      <Flower3 class="flower3 abs" />
+    <img class="footer abs" src="/images/pg2/footer.png" alt="">
+
+    <div class="flower abs">
+      <Animate class="flower1 abs" :comp="Flower1" :name="flowerAnimate.left" :ready="show" />
+      <Animate class="flower2 abs" :comp="Flower2" :name="flowerAnimate.right" :ready="show" />
+      <Animate class="flower3 abs" :comp="Flower3" :name="flowerAnimate.left" :ready="show" />
     </div>
   </div>
 </template>
 
 <script setup>
-import Bell from '@/components/Bell.vue';
-import Cloud from './Cloud.vue';
-import Smoke from './smoke.vue';
-import Flower1 from './flower/Flower1.vue';
-import Flower2 from './flower/Flower2.vue';
-import Flower3 from './flower/Flower3.vue';
+  import { reactive, ref } from 'vue';
+  import Bell from '@/components/Bell.vue';
+  import Animate from '@/components/Animate.vue';
+  import Cloud from './Cloud.vue';
+  import Smoke from './smoke.vue';
+  import Flower1 from './flower/Flower1.vue';
+  import Flower2 from './flower/Flower2.vue';
+  import Flower3 from './flower/Flower3.vue';
+  import usePageShow from '../usePageShow';
+
+  const flowerAnimate = reactive({
+    left: '',
+    right: '',
+  });
+
+  let lastRatio = 0;
+  const flowShow = ({ intersectionRatio }) => {
+    console.log(intersectionRatio)
+    const isIn = intersectionRatio > 0.5 && intersectionRatio > lastRatio;
+    const isOut = intersectionRatio < 0.9 && intersectionRatio < lastRatio;
+
+    if (isIn) {
+      flowerAnimate.left = 'animate__fadeInLeft';
+      flowerAnimate.right = 'animate__fadeInRight';
+    }
+    if (isOut) {
+      flowerAnimate.left = 'animate__fadeOutLeft';
+      flowerAnimate.right = 'animate__fadeOutRight';
+    }
+
+    lastRatio = intersectionRatio;
+  }
 
+  const [pgRef, show] = usePageShow(flowShow);
 </script>
 
 <style lang="less" scoped>
@@ -117,6 +158,11 @@ import Flower3 from './flower/Flower3.vue';
 
   }
 
+  .footer {
+    left: 0;
+    bottom: 0;
+  }
+
   .flower {
     bottom: 0;
     left: 0;

src/pages/pg3/index.vue

@@ -1,13 +1,23 @@
 <template>
-  <div class="page pg-bg pg3">
-    <Bell class="bell abs" />
-    <div class="header step animate__animated animate__fadeInDown" data-delay="100">
+  <div class="page pg-bg pg3" ref="pgRef">
+    <Animate
+      class="header"
+      name="animate__zoomIn"
+      delay="100ms"
+      :ready="show"
+    >
       <img src="/images/pg3/header.png" alt="">
-    </div>
+    </Animate>
     <div class="content">
-      <p class="txt step animate__animated animate__fadeInDown" data-delay="1000">
+      <Animate
+        class="txt"
+        comp="p"
+        name="animate__fadeInDown"
+        delay="1s"
+        :ready="show"
+      >
         如同“紫金草行动”，我们的身边有很多人，用自己的方式向世界讲述1937，他们不同年龄、不同肤色、不同国家、不同职业，但他们讲述的是全人类共同的心愿。
-      </p>
+      </Animate>
     </div>
 
     <div class="global-map">
@@ -15,18 +25,18 @@
     </div>
 
     <ul class="card-list">
-      <li class="step animate__animated animate__fadeInUp" data-delay="1500">
+      <Animate comp="li" name="animate__fadeInUp" delay="1500ms" :ready="show">
         <img src="/images/pg3/采访1.png" alt="">
-      </li>
-      <li class="step animate__animated animate__fadeInUp" data-delay="2000">
+      </Animate>
+      <Animate comp="li" name="animate__fadeInUp" delay="2000ms" :ready="show">
         <img src="/images/pg3/采访2.png" alt="">
-      </li>
-      <li class="step animate__animated animate__fadeInUp" data-delay="2500">
+      </Animate>
+      <Animate comp="li" name="animate__fadeInUp" delay="2500ms" :ready="show">
         <img src="/images/pg3/采访1.png" alt="">
-      </li>
-      <li class="step animate__animated animate__fadeInUp" data-delay="3000">
+      </Animate>
+      <Animate comp="li" name="animate__fadeInUp" delay="3000ms" :ready="show">
         <img src="/images/pg3/采访2.png" alt="">
-      </li>
+      </Animate>
     </ul>
   </div>
 </template>
@@ -34,34 +44,10 @@
 <script setup>
   import { onBeforeUnmount, onMounted, ref } from 'vue';
   import Bell from '@/components/Bell.vue';
-  import Erasure from '@/components/Erasure.vue';
-
-  const pgRef = ref();
-  const show = ref(false);
-  let intersectionObserver = null;
-
-  const onAnimationEnd = () => {
-    show2.value = true;
-  }
-
-  // onMounted(() => {
-  //   intersectionObserver = new IntersectionObserver((entries) => {
-  //     // console.log(entries[0]);
-  //     const { intersectionRatio } = entries[0];
-  //     if (intersectionRatio <= 0) {
-  //       show.value = false;
-  //     } else if (intersectionRatio >= 0.5)  {
-  //       show.value = true;
-  //     }
-  //   }, {threshold: [0.0, 0.5]});
-
-  //   intersectionObserver.observe(pgRef.value);
-  // })
-
-  // onBeforeUnmount(() => {
-  //   intersectionObserver.disconnect();
-  // })
+  import Animate from '@/components/Animate.vue';
+  import usePageShow from '../usePageShow';
 
+  const [pgRef, show] = usePageShow(0.3);
 </script>
 
 
@@ -75,9 +61,9 @@
   }
 
   .header {
-    width: 20vw;
+    width: 30vw;
     margin: auto;
-    margin-top: 60px;
+    margin-top: 30px;
     position: relative;
 
     &::before {

src/pages/useIntersection.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, onMounted } from 'vue';
+
+export default function useIntersection(elRef, callback) {
+  let intersectionObserver = null;
+
+  onMounted(() => {
+    intersectionObserver = new IntersectionObserver((entries) => {
+      // console.log(entries[0]);
+      callback(entries[0])
+      // const { intersectionRatio } = entries[0];
+      // if (intersectionRatio <= 0) {
+      //   show.value = false;
+      // } else if (intersectionRatio >= 0.5)  {
+      //   show.value = true;
+      // }
+    }, {threshold: [0.0, 0.1, 0.5]});
+
+    intersectionObserver.observe(elRef.value);
+  })
+
+  onBeforeUnmount(() => {
+    intersectionObserver.disconnect();
+  })
+}

src/pages/usePageShow.js

@@ -0,0 +1,40 @@
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+
+export default function useIntersection(param) {
+  const pageRef = ref();
+  const showRef = ref(false);
+  let intersectionObserver = null;
+
+  let breakRatio = 0.5;
+  if (typeof param === 'number') {
+    breakRatio = param;
+  }
+
+  let callback = null;
+  if (typeof param === 'function') {
+    callback = param;
+  }
+
+  onMounted(() => {
+    intersectionObserver = new IntersectionObserver((entries) => {
+      const { intersectionRatio } = entries[0];
+      if (intersectionRatio <= 0.1) {
+        showRef.value = false;
+      } else if (intersectionRatio >= breakRatio)  {
+        showRef.value = true;
+      }
+
+      if (typeof callback === 'function') {
+        callback(entries[0]);
+      }
+    }, {threshold: [0.0, 0.1, 0.3, 0.5, 0.8, 0.9]});
+
+    intersectionObserver.observe(pageRef.value);
+  })
+
+  onBeforeUnmount(() => {
+    intersectionObserver.disconnect();
+  })
+
+  return [pageRef, showRef];
+}

src/store/index.js

@@ -3,19 +3,32 @@ import createStore from '@zjxpcyc/vue-tiny-store';
 
 const useAudio = () => {
   const el = ref();
+  const state = ref(0);
 
   const play = () => {
     el.value.play();
+    state.value = 1;
   }
 
   const pause = () => {
     el.value.pause();
+    state.value = 0;
+  }
+  
+  const toggle = () => {
+    if (state.value) {
+      pause();
+    } else {
+      play();
+    }
   }
 
   return {
     el,
+    state,
     play,
     pause,
+    toggle,
   }
 };