CodePen Embed - scrollrevealでスクロールアニメーション　基本


<div class="container">
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
   <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
   <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
   <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="row">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>


body {
  background-color: #757575;
}

.container {
  max-width: 400px;
  margin: auto;
}

.row {
  display: flex; 
}

.box {
  margin: 10px;
  width: 100px;
  height: 90vh;
  background-color: #79BD9A;
}

ScrollReveal().reveal('.box');

This Pen is owned by szaizen on CodePen.

See more by @szaizen on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://codepen.io/szaizen/pen/ExamBJW.js