Vue.js勉強したのでエンジニアポートフォリオサイト作ってみた

<template>
  <div id="app">
    <Header />
    <!-- ルーティング時の表示領域を準備 -->
    <router-view/> <!-- Home.vueが呼ばれる -->
    <Footer />
  </div>
</template>

<template>
  <div class="home">
    <Splash />
    <Profile />
    <Skill />
    <Works />
    <Contact />
  </div>
</template>

<template>
  <div ref="fade" :class="{fadein: visible, hidden: !visible}">
    <slot v-show="visible"></slot>
  </div>
</template>

<script>
export default {
  name: 'FadeInComponent',
  data () {
    return {
      visible: false
    }
  },
  created () {
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll () {
      if (!this.visible) {
        var top = this.$refs.fade.getBoundingClientRect().top
        this.visible = (top + 100) < window.innerHeight
      }
    }
  }
}
</script>

<style scoped>
.hidden {
  opacity: 0;
}

.fadein {
  animation: fadeIn 1s;
  opacity: 1;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
</style>

    <FadeIncomponent>
      <h1 class="title">Skill Set</h1>
    </FadeIncomponent>

<script>
~~~~~~~~~~~~ 省略 ~~~~~~~~~~~~~~
  directives: {
    parallax: {
      inserted (el, binding) {
        el.setAttribute( // 初期状態のスタイル
          'style',
            `
              background-position: center top;
              background-size: initial;
              backgroung-repeat: no-repeat;
              background-position-y: ${window.scrollY / binding.value.denominator}px;
            `
        )
        window.addEventListener('scroll', () => {
          el.setAttribute( // スクロール量に応じて動的に変化するスタイル
            'style',
            `
              background-position: center center;
              background-size: initial;
              backgroung-repeat: no-repeat;
              background-position-y: ${window.scrollY / binding.value.denominator + 300}px;
            `
          )
        })
      }
    }
  },
~~~~~~~~~~~~ 省略 ~~~~~~~~~~~~~~
</script>

  <div id="skill" class="bg-blar" :class="{safari: safari}" v-parallax="{
        height: '100vh',
        denominator: 1.8
    }">

    <div id="parallax">
      <div data-depth="0.2">
        <h1 class="title">
          Ike's Portfolio
        </h1>
        <span>Full Stack Engineer</span>
      </div>
    </div>

<script>
export default {
~~~~~~~~~~~~ 省略 ~~~~~~~~~~~~~~
  mounted () {
    this.$nextTick(function () {
      var layer = document.getElementById('parallax')
      const parallax = new Parallax(layer, {
        scalarX: 10.0, // X軸の移動速度と範囲を増減
        scalarY: 10.0, // Y軸の移動速度と範囲を増減
        frictionX: 0.1, // X軸のレイヤーの速度。0.00〜1.00の範囲内で指定可能
        frictionY: 0.1, // Y軸のレイヤーの速度。0.00〜1.00の範囲内で指定可能
      })
    })
    window.addEventListener('scroll', this.onScroll)
  },
~~~~~~~~~~~~ 省略 ~~~~~~~~~~~~~~
</script>

<div class="progress-wrapper">
  <span>Swift / Objective-C</span>
  <el-progress :percentage="80"></el-progress>
</div>