AnimLabo

ホバーやクリック時のアニメーションを、実際の動きとコード例で紹介しています。
コーディングの参考やアイデア探しにご活用ください。トリガーとしてスクロールを利用しているだけのものは、JavaScript利用としてカテゴライズはしておりません。
あくまで動きにJavaScriptが絡んでくるかどうかで振り分けしています。

オーバーレイされて出てくる画像

• ドーン/ギュッ系
• 画像
• スクロール
• CSSのみ

ぬるっと出てくるテキスト

• スーッと系
• テキスト
• スクロール
• CSSのみ

枠から描画されるテキスト

• フワッと系
• テキスト
• スクロール
• CSSのみ

下線が引かれるテキスト

• ちょこっと反応系
• テキスト
• ホバー
• CSSのみ

上書きされていくテキスト

• フワッと系
• テキスト
• クリック
• JavaScript

ロールするテキスト

• スーッと系
• テキスト
• 常時
• CSSのみ

むにゅっと出てくるボタン

• ビヨン系
• ボタン
• スクロール
• CSSのみ

矢印がスライドするボタン

• ちょこっと反応系
• スーッと系
• ボタン
• ホバー
• CSSのみ

立体的なボタン

• ちょこっと反応系
• ボタン
• ホバー
• CSSのみ

ドットが跳ねるテキスト

• ビヨン系
• テキスト
• 常時
• CSSのみ