CSSスクロールアニメーションビルダー
効果、距離、時間、イージングを選び、JavaScriptなしでも表示され、減速設定にも従うCSSを生成します。
値を選んで生成します。 ローカルで生成。JavaScriptがなくてもフォールバックは表示されます。
使い方
使い方
- 効果と範囲内の数値を選びます。
- 生成したCSSと任意の監視スクリプトをコピーします。
- 要素にクラスを付け、キーボードと減速設定を確認します。
制限付き出力
値を安全な範囲に制限し、生成文を200文字以内にします。
段階的拡張
JavaScriptやObserverがなければ表示したまま、対応時だけ一度アニメーションします。
動きの設定
prefers-reduced-motionで遷移を無効にし、表示を保ちます。
よくある質問
あわせて知りたいこと
ライブラリは必要ですか？
いいえ。CSSと対応ブラウザーのObserverだけです。
JavaScriptがない場合は？
初期状態が表示なので、要素は見えたままです。
カードにも使えますか？
はい。各要素にクラスを付けると個別に表示されます。