njDaTuSha/src/pages/pg2/index.vue

<template>
  <div class="page pg-bg pg2" parallax ref="pgRef">
    <div class="bg">
      <div>
        <Animate
          comp="img"
          name="animate__fadeInLeft"
          src="/images/pg2/content-bg.png"
          :ready="show"
        />
      </div>
    </div>
    <div class="content">
      <div>
        <Animate
          class="year"
          comp="img"
          name="animate__fadeIn"
          src="/images/pg2/1939年.png"
          delay="1000ms"
          :ready="show"
        />
      </div>
      <div>
        <Animate
          class="text1"
          comp="img"
          name="animate__fadeInUp"
          src="/images/pg2/text1.png"
          delay="2000ms"
          :ready="show"
        />
      </div>
      <div>
        <Animate
          class="text2"
          comp="img"
          name="animate__fadeIn"
          src="/images/pg2/text2.png"
          delay="3000ms"
          :ready="show"
        />
      </div>

    </div>

    <div class="groups abs">
      <div>
        <InkEffect class="ink-ruins" src="./images/pg2/废墟color.png" :speed="10" :active="inkActive" :clearable="true" />
        <img class="ruins" src="/images/pg2/废墟.png" alt />
      </div>
    </div>
    <div class="flower1">
      <div>
        <img :class="{'flower-fly': show}" src="/images/pg2/flower1.png" alt="" @animationend="inkActive = true" />
      </div>
    </div>

    <div class="flower2">
      <div>
        <img src="/images/pg2/flower2.png" alt="" />
      </div>
    </div>

    <div class="footer txt">
      了解故事
      <img src="/images/pg2/箭头-右.png" alt />
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, watch } from "vue";
  import { useRouter } from "vue-router";
  import Bell from "@/components/Bell.vue";
  import Animate from "@/components/Animate.vue";
  import InkEffect from "@/components/InkEffect.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 router = useRouter();
  const inkActive = ref(false);

  const onClick = () => {
    router.push(`/pg2-2`);
  };

  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);

  watch(show, (val) => {
    if (!val) {
      inkActive.value = false;
    }
  })
</script>

<style lang="less" scoped>
.pg2 {
  overflow: hidden;
  .bg {
    position: absolute;
    z-index: 0;
    width: 50%;
    left: 0;
    top: 0;
    & > div {
      position: relative;
    }
  }

  .content {
    z-index: 10;
    width: 80vw;
    margin-left: 15vw;
    padding-top: 80px;
    line-height: 2em;

    .year {
      margin-top: 40px;
      width: 60%;
    }

    .text1 {
      margin-top: 30px;
      width: 30%;
    }
    .text2 {
      margin-top: 30px;
      width: 60%;
    }
    .story {
      margin-top: 12px;
      width: 45%;
      display: block;
      animation-delay: 600ms;
    }
  }

  .groups {
    top: 50vh;
    left: 0;
    width: 100%;
    z-index: 3;

    & > div {
      position: relative;
    }

    .ruins {
      z-index: 2;
      position: relative;
    }

    .ink-ruins {
      position: absolute;
      z-index: 4;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }
  .flower1 {
    position: absolute;
    z-index: 20;
    width: 50%;
    left: 50px;
    top: 500px;
    & > div {
      position: relative;
    }
    img {
      width: 50px;
    }
  }
  

  .flower-fly {
    transform-origin: left bottom;
    animation: flower-fly 3s ease-in-out 1s forwards;
  }

  @keyframes flower-fly {
    0% {
      transform: rotate(0) translate3d(0, 0, 0);
      opacity: 1;
    }

    90% {
      opacity: 0;
    }

    100% {
      transform: rotate(180deg) translate3d(-60vw, -6vh, 0);
      opacity: 0;
    }
  }

  .flower2 {
    position: absolute;
    z-index: 20;
    right: 0;
    top: 250px;
    img {
      width: 80px;
    }
  }
  .footer {
    left: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 24px;
    img {
      width: 15px;
      height: 25px;
      display: inline;
      width: auto;
      vertical-align: text-bottom;
    }
  }
}
</style>