スクロール時のアニメーション（CSSのスクロールリビール）
エフェクトを選んでプレビューをスクロールしてください。アニメーションはスクロールに連動し、JavaScriptもライブラリも不要です。
使い方スクロールに合わせて現れるセクション
プレビュー内をスクロールしてエフェクトを確認してください（Chrome、Edge、Safari 26以降）。
利用できる言語: 
スクロール時のアニメーション（CSSのスクロールリビール）: 用途
スクロールに合わせて現れるセクションは、ページを生き生きと見せます。このジェネレーターは、AOSやScrollRevealのようなライブラリを使わず、スクロール連動アニメーション（animation-timeline: view()）だけでエフェクトを作ります。
エフェクト（せり上がり、フェードインのみ、横からのスライド、拡大、ぼかし解除）、距離、画面に入るどの位置でアニメーションを終えるかを選び、プレビューをスクロールしてください。コードは @supports の中に入るため、機能がまだ実験的なオプションの扱いであるFirefoxでも、要素は非表示にならず普通に表示されます。動きを減らしたい設定にも対応しています。
使い方
- エフェクトと距離を選びます。
- アニメーションを終える位置を決めます。
- CSSをコピーして、セクションにクラスを付けます。
使うタイミング
- ランディングページ。
- サービスやお客様の声のセクション。
- ポートフォリオ。
よくある質問
すべてのブラウザで動きますか？
スクロール連動アニメーション（animation-timeline）は、Chrome、Edge、Safari 26以降で動作します。Firefoxではまだ実験的なオプションの扱いです。そのためコードは @supports の中に入っており、未対応の環境では要素が非表示にならず、そのまま普通に表示されます。
AOSやScrollRevealのようなライブラリを使わないのはなぜですか？
これらのライブラリはJavaScriptでスクロールを監視するため、読み込みが重くなり、性能の低いスマートフォンでは動作がもたつくことがあります。animation-timeline ならブラウザ自身がアニメーションを処理するので、サイトが軽くなります。
動きを減らしたい人にはどうなりますか？
コードは prefers-reduced-motion に対応しています。この設定を有効にしている人には、スライドや拡大なしで要素が表示されます。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。