パララックス効果を実現！CSS初心者向け解説＆3つの実用例

はじめに
●パララックス効果とは？
●パララックス効果の作り方
●使い方の例
- ○縦スクロール時のパララックス効果
- ○横スクロール時のパララックス効果
●問題点と対処法
- ○パフォーマンス問題
- ○モバイルデバイスへの対応
まとめ

はじめに

ウェブデザインの世界で、動きや立体感を表現するために「パララックス効果」という手法があります。

今回の記事では、CSS初心者の方向けに、パララックス効果の作り方、使い方、対処法を徹底解説し、さらに応用例とサンプルコードも紹介します。

これを読めば、ウェブデザインのスキルアップに繋がること間違いなしです！

●パララックス効果とは？

パララックス効果とは、ウェブサイトの背景と前景が異なる速度でスクロールされることで、立体感や動きを出す技術のことです。

CSSを使って簡単に実装することができます。

●パララックス効果の作り方

パララックス効果を実装するには、HTMLとCSSが必要です。

まずは、HTMLで基本的な構造を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>パララックスサンプル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="parallax">
    <div class="parallax__content">
      <h1>パララックス効果のサンプル</h1>
    </div>
  </div>
</body>
</html>

次に、CSSでパララックス効果を実装します。以下のようなコードをstyles.cssに追加してください。

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
}

.parallax__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

このコードでは、.parallaxクラスが適用されたdiv要素の背景画像が固定されるようになっています。

また、.parallax__contentクラスが適用されたdiv要素の中にあるコンテンツは、画面の中央に配置されるようになっています。

●使い方の例

パララックス効果を応用して、さまざまなウェブデザインが可能です。

ここでは、いくつかのサンプルコードとともに、パララックス効果の使い方を紹介します。

○縦スクロール時のパララックス効果

下記のサンプルコードでは、縦スクロール時に背景画像がゆっくり動くパララックス効果が実現されています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>縦スクロールパララックスサンプル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="parallax">
    <div class="parallax__content">
      <h1>縦スクロールパララックス効果のサンプル</h1>
    </div>
  </div>
  <div class="content">
    <p>ここに通常のコンテンツが続きます。</p>
  </div>
</body>
</html>

CSS (styles.css)

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 1px;
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-size: cover;
}

.parallax__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  padding: 2rem;
}

○横スクロール時のパララックス効果

下記のサンプルコードでは、横スクロール時に背景画像がゆっくり動くパララックス効果が実現されています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>横スクロールパララックスサンプル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="parallax-wrapper">
    <div class="parallax">
      <div class="parallax__content">
        <h1>横スクロールパララックス効果のサンプル</h1>
      </div>
    </div>
  </div>
  <div class="content">
    <p>ここに通常のコンテンツが続きます。</p>
  </div>
</body>
</html>

CSS (styles.css)

.parallax-wrapper {
  overflow-x: scroll;
  overflow-y: hidden;
  width: 100%;
  height: 100vh;
  white-space: nowrap;
}

.parallax {
  display: inline-block;
  height: 100%;
  width: 300%;
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-size: cover;
}

.parallax__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  padding: 2rem;
}

このコードでは、.parallax-wrapperクラスが適用されたdiv要素が横スクロールできるように設定されています。

また、.parallaxクラスが適用されたdiv要素の背景画像が固定され、横スクロール時にゆっくり動くパララックス効果が実現されています。