スクロール連動アニメ (AOS) アニメーション

使い方

• 下部の20種類のアニメーションからクリックで選択
• 上部で継続時間・遅延・イージング・オフセット (画面下端からの距離) を調整
• 「もう一度再生」ボタンでプレビュー確認
• コピーボタンで data-aos 属性付きHTMLコードを取得

AOSの導入方法

生成したコードを使うには、以下の手順でAOSライブラリを導入します:

<!-- HTMLのheadに追加 -->
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.4/dist/aos.css">

<!-- </body>直前に追加 -->
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
<script>AOS.init();</script>

<!-- 要素に data-aos 属性を付ける -->
<div data-aos="fade-up">表示される要素</div>

AOSの主なオプション

• data-aos-duration: アニメ継続時間 (ms)
• data-aos-delay: アニメ開始遅延 (ms)
• data-aos-easing: イージング種類
• data-aos-offset: 画面下端からの距離 (px)。要素がこの距離に入るとアニメ発火
• data-aos-once: 1回のみ実行するか (true/false)
• data-aos-anchor-placement: アンカー位置 (top-bottom/center-center 等)