ライブラリを使って 手軽に要素を動かしてみた
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。 その中でも特に勉強になったコードを紹介します。 コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。 あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
Animate.css × jquery.inview
定義済みのアニメーションをクラス名ひとつで呼び出せる Animate.css と、要素が画面に入ったことを検知する jquery.inview。この2つを組み合わせて「スクロールして見えたら動く」を最短距離で作る――当時の鉄板構成を記録したページです。
自分でキーフレームを書かずに完成品の動きを借りる、というライブラリ活用の入口として、いま読み返しても筋の良い題材です。
様々な動きのパターンを集めたCSSライブラリ「Animate.css」と、要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて、スクロールで手軽に要素を動かす方法を解説します。
jQueryとCSSを組み合わせて動かす
実務メモ（2026年追記）
2026年の視点で大きく変わったのは検知側です。要素が画面に入ったかどうかは、いまやブラウザ標準の IntersectionObserver で書くのが当たり前になり、jquery.inview（とjQuery本体）をこの目的で新規採用する理由はなくなりました。一方の Animate.css は現役ですが、使う動きが2〜3種類なら自前のCSS数行の方が軽い、という判断も成り立ちます。ライブラリは「便利さ」と「依存の重さ」の天秤――この記事の構成自体が、その良い教材になっています。
- ライブラリ選定は「最終更新日・依存関係・容量」の3点をまず確認
- jQuery前提のプラグインは、サイト全体でjQueryを使い続けるかの判断とセットで
- CDN読み込みは提供終了リスクがある。本番ではファイルを自サイトに置く
- ライブラリなしの基本形はよく使う動きに整理してあります
次回の予定
「画面を開いたり」「スクロールしたり」といったきっかけを与えて動くアニメーションをCSSとjQueryを組み合わせて作ってみます ＼＼\٩( ‘ω’ )و //／／
WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。
その中でも特に勉強になったコードを紹介します。
コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。
あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！
Animate.css × jquery.inview
様々な動きのパターンを集めたCSSライブラリ「Animate.css」と、要素が画面に入ったら動く「jquery.inview」というJavaScriptライブラリを組み合わせて、スクロールで手軽に要素を動かす方法を解説します。
リンクをクリックすると、背景が暗くなり動画や画像やテキストを表示
「Rerun」を押してスクロールして動きを確かめてね！↑
jQueryとCSSを組み合わせて動かす
「Rerun」を押してスクロールして動きを確かめてね！↑
次回の予定
「画面を開いたり」「スクロールしたり」といったきっかけを与えて動くアニメーションをCSSとjQueryを組み合わせて作ってみます ＼＼\٩( ‘ω’ )و //／／
