Webサイトに動きをつけたい。でもJavaScriptを書くのはハードルが高い…
そんなときにおすすめなのが AOS.js（Animate On Scroll） です。
この記事では、AOS.jsの基本的な使い方と、実際のLPテンプレート（ファッション雑誌風）での活用例を紹介します。
✅ AOS.jsとは？
AOS（Animate On Scroll） は、HTMLタグにdata-aos属性を追加するだけでスクロールアニメーションを実装できるライブラリです。
JavaScriptの知識がなくても、HTMLとCSSがわかれば導入可能で、LP（ランディングページ）やポートフォリオサイトでよく使われています。
🔧 主な特徴
- HTMLに属性を追加するだけでOK（学習コストが低い）
- jQueryなどの依存なし
- 軽量でシンプル
- 商用利用OK（MITライセンス）
🛠 AOS.jsの基本的な使い方
<!-- ステップ1：CSSとJSの読み込み（CDN） -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- ステップ2：HTMLにdata-aos属性を追加 -->
<div data-aos="fade-up">フェードアップで表示</div>
<!-- ステップ3：初期化 -->
<script>
AOS.init({
duration: 1000, // アニメーションの時間（ms）
once: true // 一度だけアニメーション
});
</script>
💻 LPでの活用例：ファッション雑誌風テンプレート
以下は、ファッションマガジンを模したLPテンプレートにAOS.jsを適用したサンプルです。
各セクションで data-aos 属性を活用し、スクロールに応じて自然なアニメーションを実装しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>AOS.js LPデモ</title>
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css" />
<style>
body {
font-family: 'Helvetica Neue', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background: #f9f9f9;
}
header {
background: url('https://picsum.photos/id/1024/1920/1080') no-repeat center center / cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
header h1 {
font-size: 4rem;
letter-spacing: 4px;
}
section {
padding: 80px 20px;
max-width: 1100px;
margin: 0 auto;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 40px;
text-align: center;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
}
.two-col {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.two-col img {
width: 100%;
border-radius: 8px;
}
.two-col .text, .two-col .img {
flex: 1;
min-width: 300px;
}
.gallery {
display: flex;
overflow-x: auto;
gap: 20px;
}
.gallery img {
width: 300px;
flex-shrink: 0;
border-radius: 8px;
}
footer {
background: #000;
color: #fff;
text-align: center;
padding: 40px 20px;
}
</style>
</head>
<body>
<header data-aos="fade">
<h1>FASHION IS CULTURE</h1>
</header>
<section>
<h2 class="section-title" data-aos="fade-up">LIFESTYLE & CULTURE</h2>
<div class="two-col">
<div class="img" data-aos="fade-right">
<img src="https://picsum.photos/id/1011/600/400" alt="">
</div>
<div class="text" data-aos="fade-left">
<p>ライフスタイルとカルチャーを美しく融合した、上質なウェブ体験。</p>
</div>
</div>
</section>
<section>
<h2 class="section-title" data-aos="fade-up">TREND SPECIAL</h2>
<div class="two-col">
<div class="text" data-aos="fade-right">
<p>モードからサステナブルまで、最新のトレンドをピックアップ。</p>
</div>
<div class="img" data-aos="fade-left">
<img src="https://picsum.photos/id/1018/600/400" alt="">
</div>
</div>
</section>
<section>
<h2 class="section-title" data-aos="fade-up">GALLERY</h2>
<div class="gallery" data-aos="zoom-in">
<img src="https://picsum.photos/id/1025/300/400" alt="">
<img src="https://picsum.photos/id/1036/300/400" alt="">
<img src="https://picsum.photos/id/1050/300/400" alt="">
</div>
</section>
<footer data-aos="fade">
<p>© 2025 Fashion Culture Magazine</p>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init({
duration: 1000,
once: true
});
</script>
</body>
</html>
🧪 よく使うdata-aos属性一覧
| 属性名 | 効果 |
|---|---|
fade | フェードイン |
fade-up | 下からフェードイン |
fade-down | 上からフェードイン |
fade-left | 左から |
fade-right | 右から |
zoom-in | 拡大しながら表示 |
flip-left | 左回転フリップ |
🔚 まとめ
- AOS.jsは初心者でも導入しやすい
data-aos属性で視覚的な演出がすぐに追加できる- LPやポートフォリオにぴったり
ScrollReveal.jsよりも「手軽さ」を重視したい場合はAOS.jsがおすすめです。