パララックススクローリング（parallax scrolling）は、ウェブデザインにおいて、背景画像が前景コンテンツよりもゆっくりとスクロールすることで、深度感と動きを生み出すテクニックです。
この記事では、HTMLとCSSを使ってシンプルなパララックス効果を作成する方法を紹介します。
DEMOはこんな感じです。
このコード例では、3つの異なるセクションがあり、それぞれのセクションには異なる背景画像が設定されています。ユーザーがスクロールすると、これらの背景画像は固定されたままで、前景のテキストコンテンツが上にスクロールしていきます。
サンプルコード
HTML構造
<body>
<div class="parallax"></div>
<section>コンテンツ1</section>
<div class="parallax"></div>
<section>コンテンツ2</section>
<div class="parallax"></div>
<section>コンテンツ3</section>
<!-- さらにセクションを追加... -->
</body>CSSスタイル
.parallax {
/* パララックス効果のための背景画像設定 */
background-image: url('background.jpg');
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
section {
height: 100vh;
padding: 50px;
background: #f7f7f7;
/* セクションのスタイル設定 */
}パララックス効果のポイント
background-attachment: fixed;が重要です。これにより、背景画像がビューポートに対して固定され、スクロール時に動かなくなります。- 各セクションは背景と異なるスピードでスクロールします。これにより、パララックス効果が生まれます。
- JavaScriptを使用して、スクロールに応じて背景画像の速度を動的に変更することも可能です。
- レスポンシブデザインにも注意を払い、小さい画面での表示が崩れないようにしましょう。
横向きも可能
横向きのパララックススクローリングに変更するためには、いくつかの変更を加える必要があります。
HTML構造
<div class="horizontal-parallax">
<div class="parallax" style="background-image: url('background1.jpg');"></div>
<section>コンテンツ1</section>
<div class="parallax" style="background-image: url('background2.jpg');"></div>
<section>コンテンツ2</section>
<div class="parallax" style="background-image: url('background3.jpg');"></div>
<section>コンテンツ3</section>
<!-- さらにセクションを追加... -->
</div>CSSスタイル
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow-x: hidden;
}
.horizontal-parallax {
display: flex;
height: 100vh;
width: calc(100vw * 6); /* 各セクションの幅の合計 */
}
.parallax, section {
flex: 0 0 100vw;
height: 100vh;
}
.parallax {
background-attachment: scroll; /* 横スクロール用に変更 */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
section {
padding: 50px;
background: #f7f7f7;
/* その他のスタイリングを追加... */
}
コメント