ホームページ > 記事 > ウェブフロントエンド > HTMLとCSSを使用して全画面視差レイアウトを実装する方法

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

WBOYオリジナル: 2023-10-25 12:33:571163ブラウズ

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を使用して全画面視差レイアウトを実装する方法タグを使用してさまざまな背景画像を表示しています。対応する画像ファイルのパスを独自の画像ファイルのパスに置き換える必要があります。

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

/* 设置全屏视差布局的样式 */
.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;
}

上記のサンプルコードでは、

と

のスタイルと、単純なコンテンツレイヤーも設定しています。これらのスタイルは視差レイアウトを機能させるためにありますが、ニーズに合わせて調整することもできます。

これは、HTML と CSS を使用してシンプルな全画面視差レイアウトを実装するための基本的な手順とコード例です。ニーズと創造性に応じてさらに変更および拡張し、よりユニークで魅力的なフルスクリーン視差効果を作成できます。この記事がフルスクリーン視差レイアウトの理解と実践に役立つことを願っています。

以上がHTMLとCSSを使用して全画面視差レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

css html class transform

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML チュートリアル: アダプティブプロポーショナルレイアウトに Flexbox を使用する方法次の記事：HTML チュートリアル: アダプティブプロポーショナルレイアウトに Flexbox を使用する方法

続きを見る