CSSアニメーション

Question

実現したいこと

開いた時やスクロールした時に、ふわっと表示されるウェブページがありますよね。あれを実現したいです。

参考サイト

試してみたこと

デベロッパーツールを開いてどんなふうに動いてるのかなと調べてみましたが、自分にはちょっと難しかったです。。。

質問

参考サイトのようなページの要素をふわっと表示させる為には、どんな技術が使われているのかを知りたいです。
CSSアニメーションについて調べればいいのか、Jqueryを使えばいいのか、はたまた他の事柄なのか。
「〇〇と〇〇勉強したら、こういうの出来るようになるよ」みたいな感じの回答が欲しいです。そしたら後は自分で調べてみます。

※いくつか実現方法があった場合、なるべく楽で最新の技術を教えてほしいです...。

追記の質問

ふわっと表示させるというものすごく漠然とした表現を使いましたが、適当な言葉があれば教えて欲しいです。
またとりあえずウェブページをふわっとさせたいだけなので、実現に必要な最低限の事柄を教えて欲しいです。

Answer 1

スクロールアニメーションとかスクロールファイアとか呼ばれてるかなと。

inviewとかfadeinを組み合わせればできそうに思います。

そのまま「jQuery スクロール ふわっとコンテンツが出てくるやつ」とかで検索してもそれなりに出てきますよ。

Comments

[usui_orange]

実現できました。ありがとうございます！！

Answer 2

スライド処理やフェード処理にeasingを絡める感じですね

transition-timing-function－CSS3リファレンス

CSSのみでやりにくい場合はjQueryなどでやるとよいでしょう