HTMLとCSSを使用して全画面視差レイアウトを実装する方法-htmlチュートリアル-php.cn

HTMLとCSSを使用して全画面視差レイアウトを実装する方法

HTML と CSS を使用して全画面視差レイアウトを実装する方法

全画面視差効果は、Web デザインでよく使用されるテクノロジです。より豊かで魅力的な視覚体験。この記事では、HTML と CSS を使用して簡単な全画面視差レイアウトを実装する方法と、具体的なコード例を紹介します。

視差効果の原理は、背景画像の複数のレイヤーを異なる速度で同時にスクロールすることで、異なるレベルの 3 次元性を作成することです。次のコード例では、HTML マークアップと CSS スタイルを使用して、単純な全画面視差効果を実装します。

まず、HTML で基本的なフレーム構造を作成する必要があります。

タグに 3 つの

要素を追加して、視差効果の背景レイヤーとして機能します。

<!DOCTYPE html>
<html>
<head>
    <title>全屏视差布局</title>
    <style>
        /* 设置全屏视差布局的样式 */
        body {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 隐藏滚动条 */
        }

        .parallax {
            width: 100%;
            height: 100vh; /* 设置全屏高度 */
            position: relative;
            overflow: hidden;
        }

        .parallax__layer {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .parallax__layer--back {
            transform: translateZ(-1px); /* 设置背景层的视差深度 */
        }

        .parallax__layer--base {
            transform: translateZ(0);
        }

        .parallax__layer--front {
            transform: translateZ(1px); /* 设置前景层的视差深度 */
        }

        .content {
            position: relative;
            z-index: 2; /* 将内容层置于最上层 */
            padding: 50px;
            text-align: center;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="parallax">
        <div class="parallax__layer parallax__layer--back">
            <img src="back.jpg" alt="背景层" />
        </div>
        <div class="parallax__layer parallax__layer--base">
            <img src="base.jpg" alt="基础层" />
        </div>
        <div class="parallax__layer parallax__layer--front">
            <img src="front.jpg" alt="前景层" />
        </div>
        <div class="content">
            <h1>欢迎来到全屏视差布局</h1>
            <p>这是一个简单的全屏视差效果示例</p>
        </div>
    </div>
</body>
</html>

ログイン後にコピー

次に、視差効果を実現するために、これら 3 つの背景レイヤーに異なる背景画像を設定する必要があります。上記のコードでは、3 つの HTMLとCSSを使用して全画面視差レイアウトを実装する方法タグを使用してさまざまな背景画像を表示しています。対応する画像ファイルのパスを独自の画像ファイルのパスに置き換える必要があります。

最後に、対応するスタイルを