【CSS】CSSだけで要素にアニメーションをつける(画面に入った時に動くJSのおまけ)

CSS

いつもアニメーションのやり方を調べてしまうのでメモです。

スポンサーリンク

hoverでアニメーション

liタグをhoverすると動くCSSです。

ついでに画面に表示したときに発動するjs

要素の縦位置を取得して、スクロールがそこまで行ったらアニメーションのclassを追加するという流れです。

また、通り過ぎたら付与したclassを削除します。

下からスクロールで戻ってくるときにもclassを付与します。(オレンジ箇所)

ただこれだと共通で複数設定する時などはイチイチ処理を書くはめになりますので工夫が必要です。

ワードプレスなどではアニメーションを作成できるプラグインがありますので、そちらを使ったほうが早いです。

コメント

タイトルとURLをコピーしました