thumb

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

さて、突然ですがホームページを見ていて、文字が下からフワッと浮き出るアニメーションを見たことがありますか?

これはどのように制御しているのでしょうか。

今回は下から文字をふわっと出す方法についてお話したいと思います。

参考ページ

どのようにフワッと動くのか、ショート動画としてYouTubeにアップしました。

内容はホームページ作成する流れの中でフワッとする動きがあるので、注目してご覧ください。。

面白いと思ったらチャンネル登録・高評価お願いいたします。



コード

こちらはスクロールしてフェードインしていくもの

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のクラスを読み込んでいるだけなので流し見程度で問題ありません。

CSS

おすすめの記事