Vue.jsでお手軽にパララックスを実装できる「vue-inview」

by kabanoki

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-inview.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div id="app">
  <p><button onclick="location.reload();">再読み込み</button></p>
  <div v-inview:animate="'fadeInLeft'">
    <div class="box">BOX1</div>
  </div>
  <div v-inview:animate="'fadeInDownBig'">
    <div class="box">BOX2</div>
  </div>
  <div v-inview:animate="'fadeInRight'">
    <div class="box">BOX3</div>
  </div>
  <div class="h500">↓へスクロール</div> 
  <div v-inview:animate="'fadeInLeft'">
    <div class="box">BOX1</div>
  </div>
  <div v-inview:animate="'fadeIn'">
    <div class="box">BOX2</div>
  </div>
  <div v-inview:animate="'fadeInRight'">
    <div class="box">BOX3</div>
  </div>
</div>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.h500 {
  height:500px;
  clear:both;
  text-align:center;
}

.box{
  float:left;
  height: 150px;
  width: 22%;
  margin: 3px;
  background-color: #62caaa;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  border: 2px solid #fff;
  font-size: 30px;
  border-radius: 10px;
}

Vue

const Inview = window.vueinview;

Vue.use(Inview);

let app = new Vue({
  el: '#app'
});