Section 005

AOS.jsスクロールアニメーション

AOS（Animate On Scroll）ライブラリを使ったスクロール連動アニメーション。簡単な属性追加だけでプロフェッショナルなアニメーション効果を実現します。

学習ポイント

外部ライブラリの導入 - CDNからCSS/JSを読み込む方法
data属性 - HTMLのカスタムデータ属性でアニメーションを指定
AOS.init() - ライブラリの初期化とオプション設定
anchorPlacement - 発火タイミングの制御
アニメーション種類 - fade、zoom、slideなど多彩な効果

AOS.jsの導入方法

1. CSSの読み込み（head内）

<link rel="stylesheet"
href="https://unpkg.com/aos@2.3.1/dist/aos.css" />

2. JSの読み込みと初期化（body終了タグ前）

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 800,
once: true,
});
</script>

CDNとは？
Content Delivery Networkの略。ライブラリをダウンロードせずに、URLから直接読み込めます。unpkg.comやcdnjs.comがよく使われます。

anchorPlacementで発火位置を制御

data-aos-anchor-placementは、アニメーションが発火するタイミングを細かく制御できる重要な属性です。要素ごとに個別設定するのがベストプラクティスです。

data-aos-anchor-placement="要素の位置-画面の位置"
/* 例 */
'top-bottom' /* 要素の上端が画面の下端に来た時（デフォルト） */
'top-center' /* 要素の上端が画面の中央に来た時 */
'center-center' /* 要素の中央が画面の中央に来た時 */
'bottom-center' /* 要素の下端が画面の中央に来た時 */

使い分けのポイント
top-center：通常のコンテンツに最適。要素の上端が画面中央に来たら発火。
center-center：ギャラリーなど画像に最適。要素の中央が画面中央に来たら発火。

グローバル設定より個別設定を推奨
AOS.init()でグローバルに設定すると、ヒーローなど画面上部の要素が発火しないことがあります。要素の役割に応じて個別に設定しましょう。

基本的な使い方

<!-- フェードイン -->
<div data-aos="fade">...</div>
<!-- 下から上へフェードイン -->
<div data-aos="fade-up">...</div>
<!-- 右からスライドイン -->
<div data-aos="fade-left">...</div>
<!-- ズームイン -->
<div data-aos="zoom-in">...</div>

data-aos属性に効果名を指定するだけ。スクロールで要素が画面中央に来ると自動的にアニメーションが発火します。

主要なアニメーション効果

Fade系

fade /* 単純なフェードイン */
fade-up /* 下から上へ */
fade-down /* 上から下へ */
fade-left /* 右から左へ */
fade-right /* 左から右へ */

Zoom系

zoom-in /* 拡大しながら表示 */
zoom-in-up /* 拡大＋下から上へ */
zoom-out /* 縮小しながら表示 */

Flip/Slide系

flip-up /* 下から回転 */
flip-left /* 右から回転 */
slide-up /* 下からスライド */

AOS.init()のオプション

AOS.init({
duration: 800, // アニメーション時間（ms）
easing: 'ease', // イージング関数
once: true, // 一度だけ実行
offset: 120, // 追加オフセット（px）
delay: 0, // 遅延時間（ms）
disable: false, // 特定条件で無効化
});

once: trueの効果
once: trueを設定すると、アニメーションは1回だけ実行されます。スクロールで戻っても再実行されないので、パフォーマンスが向上します。

anchorPlacementはグローバルより個別で
anchorPlacementをグローバルに設定すると、ヒーローなど最初から画面内にある要素が発火しないことがあります。data-aos-anchor-placement属性で要素ごとに設定するのが確実です。

要素ごとの個別設定

<div data-aos="fade-up"
data-aos-duration="1000"
data-aos-delay="200"
data-aos-anchor-placement="top-center">
カスタム設定の要素
</div>

主要な個別属性

data-aos-duration - アニメーション時間
data-aos-delay - 遅延時間（連番で設定するとシーケンシャルに）
data-aos-anchor-placement - 個別の発火タイミング
data-aos-once - 一度だけ実行（true/false）

このLPでの使用例

<!-- ヒーロー：ページ読み込み時にフェード（デフォルトのtop-bottom） -->
<header data-aos="fade" data-aos-duration="1200">
<h1>FASHION IS CULTURE</h1>
</header>
<!-- 2カラム：要素上端が画面中央に来たら発火 -->
<div class="col" data-aos="fade-right" data-aos-anchor-placement="top-center">
<div class="col" data-aos="fade-left" data-aos-anchor-placement="top-center">
<!-- ギャラリー：要素中央が画面中央に来たら発火 + delay -->
<div class="gallery-item" data-aos="zoom-in" data-aos-anchor-placement="center-center">
<div class="gallery-item" data-aos="zoom-in" data-aos-anchor-placement="center-center" data-aos-delay="100">
<div class="gallery-item" data-aos="zoom-in" data-aos-anchor-placement="center-center" data-aos-delay="200">

役割に応じた設定
・ヒーロー：デフォルト（top-bottom）で即発火
・通常コンテンツ：top-centerで要素が見え始めたら発火
・ギャラリー：center-centerで画像中央が画面中央に来たら発火

パフォーマンスと注意点

過度な使用は避ける - すべての要素にアニメーションを付けると煩雑になります
モバイル対応 - disable: 'mobile'でモバイルでは無効化も可能
アクセシビリティ - prefers-reduced-motionに配慮が必要

/* モーション軽減設定への対応 */
@media (prefers-reduced-motion: reduce) {
[data-aos] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}

応用・発展

data-aos-delayを連番で設定してシーケンシャルなアニメーション
カスタムアニメーションを追加（CSS @keyframesと組み合わせ）
Intersection Observer APIを使った自前実装に挑戦
他のライブラリ（ScrollReveal, GSAP ScrollTrigger）との比較

FASHION IS CULTURE

LIFESTYLE & CULTURE

TREND

GALLERY