one_day_in_southern_Song_dynasty/src/views/HomeView.vue

<template>
  <div
    class="home"
    draggable="false"
    @mousedown="onMouseDown"
    @mousemove="onMouseMove"
    @mouseup="onMouseUp"
    @wheel.passive="onWheel"
  >
    <img
      class="landscape"
      src="@/assets/landscape.png"
      alt=""
      draggable="false"
    >
    <div
      class="people-far"
      :style="{
        right: peopleFarPositionRight,
      }"
    >
      <img
        src="@/assets/people-far.png"
        alt=""
        draggable="false"
      >
    </div>
    <div
      class="people-near"
      :style="{
        right: peopleNearPositionRight,
      }"
    >
      <img
        class="peopleNearSerialFrames"
        :class="peopleNearColorStatus"
        src="@/assets/people-near-serial-frame.png"
        alt=""
        draggable="false"
      >
      <HotSpot
        class="hot-spot"
        @click="onClickPeopleNearHotSpot"
      />
    </div>
    <img
      class="introduce"
      :style="{
        left: introducePositionLeft,
      }"
      src="@/assets/introduce.png"
      alt=""
      draggable="false"
    >
  </div>
</template>

<script>
export default {
  name: 'HomeView',
  components: {
  },
  data() {
    return {
      landscapePositionRight: '-50%',
      peopleFarPositionRight: '0px',
      peopleNearPositionRight: '-30%',
      introducePositionLeft: '2%',
      translateLength: 0,
      isMouseDown: false,

      moveSpeed: 0,
      lastMoveEventTimeStamp: 0,
      lastAnimationTimeStamp: 0,
      animationFrameId: null,

      peopleNearColorStatus: 'no-color', // 'no-color', 'color'
      isPeopleNearColorChanging: false,
    }
  },
  watch: {
    translateLength: {
      handler(v) {
        console.log(v)
        if (v > 0) {
          v = 0
          this.translateLength = v
          this.moveSpeed = 0
        } else if (v < -window.innerWidth * 2) {
          v = -window.innerWidth * 2
          this.translateLength = v
          this.moveSpeed = 0
        }
        this.peopleFarPositionRight = `calc(0px - ${v * 0.2}px)`
        this.peopleNearPositionRight = `calc(-30% - ${v * 0.8}px)`
        this.introducePositionLeft = `calc(2% + ${v * 1}px)`
      }
    }
  },
  mounted() {
    this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
  },
  unmounted() {
    cancelAnimationFrame(this.animationFrameId)
  },
  methods: {
    onMouseDown(e) {
      this.isMouseDown = true
      this.moveSpeed = 0
      this.lastMoveEventTimeStamp = 0
      this.lastAnimationTimeStamp = Date.now()
    },
    onMouseUp(e) {
      this.isMouseDown = false
    },
    onMouseMove(e) {
      if (this.isMouseDown) {
        if (this.lastMoveEventTimeStamp) {
          const currentMoveSpeed = e.movementX / (e.timeStamp - this.lastMoveEventTimeStamp)
          this.moveSpeed = this.moveSpeed * 0.9 + currentMoveSpeed * 0.1
        }
        this.lastMoveEventTimeStamp = e.timeStamp
      }
    },
    onWheel(e) {
      this.translateLength -= e.deltaY
    },
    inertanceEffect() {
      const timeStamp = Date.now()
      const timeElapsed = timeStamp - this.lastAnimationTimeStamp
      if (this.moveSpeed > 0) {
        this.moveSpeed -= 0.003 * timeElapsed
        if (this.moveSpeed < 0) {
          this.moveSpeed = 0
        }
      } else if (this.moveSpeed < 0) {
        this.moveSpeed += 0.003 * timeElapsed
        if (this.moveSpeed > 0) {
          this.moveSpeed = 0
        }
      }

      this.translateLength += this.moveSpeed * timeElapsed

      this.lastAnimationTimeStamp = timeStamp
      this.animationFrameId = requestAnimationFrame(this.inertanceEffect)
    },
    onClickPeopleNearHotSpot() {
      if (this.isPeopleNearColorChanging) {
        return
      } else {
        if (this.peopleNearColorStatus === 'no-color') {
          this.peopleNearColorStatus = 'color'
        } else {
          this.peopleNearColorStatus = 'no-color'
        }
        this.isPeopleNearColorChanging = true
        setTimeout(() => {
          this.isPeopleNearColorChanging = false
        }, 2500)
      }

    }
  }
}
</script>

<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;
  background-image: url(@/assets/background.jpg);
  background-repeat: repeat;
  background-size: contain;
  position: relative;
  overflow: hidden;
  .landscape {
    height: 30%;
    position: absolute;
    top: 0;
    right: 0;
  }
  .people-far {
    position: absolute;
    top: 20%;
    height: 60%;
    > img {
      height: 100%;
    }
  }
  .people-near {
    position: absolute;
    bottom: 0;
    width: 600px;
    height: 800px;
    transform: scale(calc(90vh / 800px));
    overflow: hidden;
    > .hot-spot {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 15%;
    }
    > .peopleNearSerialFrames {
      position: absolute;
      height: 100%;
      transition-property: left;
      transition-duration: 2.5s;
      transition-timing-function: steps(59, jump-end);
      &.no-color {
        left: 0;
      }
      &.color {
        left: calc(-100% * 59)
      }
    }
  }
  .introduce {
    position: absolute;
    top: 5%;
  }
}
</style>