CSSでフェードイン

前提

下記のようなアニメーションをつけたい時。

本題

ScrollRevealを使用します。
※公式サイト
https://scrollrevealjs.org/

まずは読み込みするために下記の記述を行います。
ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。

●●.html

<script src="https://unpkg.com/scrollreveal"></script>

npm でインストールする場合は下記コマンドを実行してインストールして下さい。

$ npm install scrollreveal --save

実際に実装してみます。

●●.html

<div class="page">
  <div class="target text1">scroll</div>
</div>
<div class="page">
  <div class="target text2">hello</div>
</div>
<div class="page">
  <div class="target text3">left</div>
</div>
<div class="page">
  <div class="target text4">right</div>
</div>
<div class="page">
  <div class="target text5">top</div>
</div>
<div class="page">
  <div class="target text6">animation</div>
</div>
<div class="page">
  <img class="target image1" src="https://liginc.co.jp/wp-content/uploads/2017/10/150691334095133300_52.png">
</div>

続いて、CSS。

@mixin positionCenter() {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

body {
  background-color: #757575;
  font-family: Arial;
  color: #79BD9A;
}

.page {
  position: relative;
  height: 100vh;
}

.target {
  @include positionCenter();
  font-size: 50px;
  font-weight: bold;
}

img {
  width: 300px;
}

最後にjs。

●●.js

ScrollReveal().reveal('.text2', { 
  duration: 1600, 
  scale: 4,
  reset: true
});

ScrollReveal().reveal('.text3', { 
  duration: 1600, 
  origin: 'left', 
  distance: '50px',
  reset: true   
});

ScrollReveal().reveal('.text4', { 
  duration: 1600, 
  origin: 'right', 
  distance: '50px',
  reset: true   
});

ScrollReveal().reveal('.text5', { 
  duration: 1600, 
  origin: 'top', 
  distance: '50px',
  reset: true   
});

ScrollReveal().reveal('.text6', { 
  duration: 1600, 
  scale: 0.1,
  reset: true
});

ScrollReveal().reveal('.image1', { 
  duration: 1600,
  reset: true   
});

以上でふわっと文字や画像を出現させることができます。