[Toggle]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:parent="'animate'">
 <div :animate-toggle="'fadeInLeft'">
   <div class="box">BOX4</div>
 </div>         
 <div :animate-toggle="'fadeIn'">
   <div class="box">BOX5</div>
 </div>      
 <div :animate-toggle="'fadeInRight'">
   <div class="box">BOX6</div>
 </div>
</div>
  <div class="h500">↓へスクロール</div> 
<div v-inview:parent="'animate'">
 <div :animate-toggle="'fadeInLeft'">
   <div class="box">BOX4</div>
 </div>         
 <div :animate-toggle="'fadeIn'">
   <div class="box">BOX5</div>
 </div>      
 <div :animate-toggle="'fadeInRight'">
   <div class="box">BOX6</div>
 </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'
});