スクロールした時に下からふわっと文字を出す～JavaScript×CSS～

中山テック 代表の中山です。

さて、突然ですがホームページを見ていて、文字が下からフワッと浮き出るアニメーションを見たことがありますか？
これはどのように制御しているのでしょうか。

プログラミングと動きを交えて説明していきたいと思います。
最下にローカルで動くファイルも置いておきます。

※参考ページ

HTML

<p class="scroll-up">我々は何も成し遂げていない。</p><br><br>
<p class="scroll-up">だがしかし、何をすれば<br><br>良いかもわからない。</p><br><br><br><br>
<p class="scroll-up">まずは色々なことに挑戦し<br><br>何かをやり遂げる・・・</p>

pタグ（文字の1つの段落として表示するHTMLタグ）に「scroll-up」と入れてます。
これはCSSのクラスを読み込んでいるだけなので流し見程度で問題ありません。