エレベーターのようなアニメーション

Elevator.vue

<template>
  <div id="wrapper">
    <div class="base">
      <div id="scaler" class="scaler">
        <section class="section section-1" data-z="0">
          <img src="../assets/4floor.png" width="100%" class="back"/>
        </section>
        <section class="section section-2" data-z="5">
          <img src="../assets/4floor.png" width="100%" class="back"/>
        </section>
        <section class="section section-3" data-z="10">
          <img src="../assets/4floor.png" width="100%" class="back"/>
        </section>
      </div>
      <div class="section elevator" style="z-index:-100;">
          <img src="../assets/2elevator.png" width="100%"/>
        {{scrollY}}
      </div>
    </div>
      <div style="z-index:10;">
      <v-btn @click="changeFloor(0)">1階</v-btn>
      <v-btn @click="changeFloor(1)">2階</v-btn>
      <v-btn @click="changeFloor(2)">3階</v-btn>
      </div>
    <div id="scroll" class="scroll"></div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import * as types from '../store/mutation-types'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      scrollY: '',
      currentFloor: ''
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll)
    var sections = document.querySelectorAll('.section')
    // セクション要素のdata-z属性を取得し、transformを設定
    // 最後のセクション要素のdata-zを元に、画面の高さを計算して設定
    // セクション要素のdata-z属性を取得し、transformを設定
    // 最後のセクション要素のdata-zを元に、画面の高さを計算して設定
    for (var i = 0; sections.length - 1 > i; i++) {
      var itemZ = sections[i].getAttribute('data-z')
      sections[i].style.transform = 'translate3d(' + 0 + 'px,' + -itemZ * 500 + 'px,' + 0 + 'px)'
    }
  },
  computed: {
    ...mapState({
      shopList: state => state.shopList
    })
  },
  methods: {
    ...mapActions({
      getShopList: types.GET_SHOP_LIST
    }),
    handleScroll () {
      this.scrollY = window.scrollY
    },
    changeFloor (floor) {
      // 全体をz方向に動かす#scaler要素を取得
      var scaler = document.getElementById('scaler')
      scaler.style.transform = 'translate3d(' + 0 + ',' + floor * 2500 + 'px,' + 0 + 'px)'
      scaler.style.transitionDuration = Math.abs(floor - this.currentFloor) * 1.5 + 's'
      this.currentFloor = floor
    }
  },
  created () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  margin: 0;
  padding: 0;
}
#wrapper {
  background-color: brown;
  position: relative;
  width: 100%;
}
#wrapper:before {
  content: "";
  display: block;
  padding-top: 75%; /* 高さを幅の75%に固定 */
}
.base {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 1px;
}
.scaler {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition-duration: 1s;
}
.section {
  width: 100%;
  height: 90%;
  padding: 30px;
  position: absolute;
  top: 10px;
  left: 0;
}
.elevator {
  width: 100%;
  height: 90%;
  padding: 30px;
  position: absolute;
  top: 10px;
  left: 0;
  z-index: -100;
}
.door {
  width: 100%;
  position: absolute;
  padding: 30px;
  top: 26.7%;
  left: 3px;
}
.scroll {
  visibility: hidden;
  z-index: -1;
}
img {
  margin: -3px;
  padding: 0%;
}
</style>