40代高卒者がIT転職に成功するためのデザインスキル【position3】

こんにちは、フローです。

今回は、position要素を使ったパララックスデザインの例を、書いて行きたいと思います。

このパララックスも、よくWEBデザインで使われるので、覚え使えるようになりましょう。

前回の記事はこちらです。

1 パララックスとは
- 1.1 HTML
- 1.2 CSS
2 まとめ

パララックスとは

パララックスデザインは、

ウェブデザインにおいて背景画像や要素が異なる速度でスクロールされることで、

立体感や深みを演出するデザイン手法です。

通常、前景の要素（テキストや画像など）が速く動き、

背景の要素が遅く動くことで、

視差効果（parallax effect）が生まれます。

これにより、ユーザーに印象的で魅力的な体験を提供することができます。

パララックスデザインは、主に以下のような方法で実装されます。

・CSSのbackground-attachmentプロパティを使って、

背景画像を固定（fixed）またはスクロール（scroll）させる方法。

・JavaScriptやCSSのtransformプロパティを使って、

要素の位置や速度を動的に制御する方法。

パララックスデザインは、

ウェブサイトのストーリーテリングやビジュアルデザインを強化し、

ユーザーエンゲージメントを高める効果があります。

ただし、パフォーマンスやアクセシビリティへの影響も考慮する必要があるため、

適切なバランスを見つけることが重要です。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Parallax Design Sample</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="parallax-container">
    <div class="content">
      <h1>パララックス<br>デザインサンプル</h1>
      <p>テキストは固定され、スクロールすると色が出てくる効果が見られます。</p>
    </div>
    <div class="parallax-section bg-transparent"></div>
    <div class="parallax-section bg-green"></div>
    <div class="parallax-section bg-yellow"></div>
  </div>
</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.parallax-container {
  position: relative;
  height: 300%;
}

.content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
}

.parallax-section {
  position: absolute;
  width: 100%;
  height: 100%;
}

.bg-transparent {
  top: 0;
  background-color: transparent;
}

.bg-green {
  background-color: #32CD32;
  top: 100%;
}

.bg-yellow {
  background-color: #FFD700;
  top: 200%;
}

@media (max-width: 768px) {
  .content {
    font-size: 14px;
  }

  .content h1 {
    font-size: 24px;
  }
}

この例では、

最初のセクションの背景色を透明に設定し、

top: 0;を追加しています。

これにより、ページが読み込まれたときにテキストが表示されます。

.contentクラスにz-index: 1;を設定して、

テキストが前面に表示されるようにしています。

スクロールすると、

固定されたテキストの上にグリーンとイエローの色がパララックスで出てきます。

このようなパララックスデザインを使用することで、

ウェブページに立体感や深みを与え、ユーザーに印象的な体験を提供することができます。