スクロールするとふわっと表示されるヤツ

2020年11月10日2020年11月28日jQuery

はじめに

前回のと似てますけど、いろんなサイトで見かけるヤツを作ってみました。いざ使う時にまごまごしないようにここに書いておこうと思います。

できた

See the Pen
bGemboN by AtsushiNakata (@nakata999)
on CodePen.

簡単に説明

要素が画面内に入ったらクラス"show"をその要素に付けてあげるんですね。そうするとcssに記述したプロパティが変化します。今回の場合は"transform"と"opacity"。その変化を"transitionを"使って滑らかにしてあげます。

if(elemTop + 150 < scroll + windowH){

if文の条件式で+150してるのは、あんまり下の方でアニメーションしても分かりづらいからです。ここは要素のサイズに合わせた適当な数値にします。

おしゃれ度

★★☆☆☆