Bagaimana untuk melaksanakan susun atur paralaks skrin penuh menggunakan HTML dan CSS-html tutorial-php.cn

Bagaimana untuk melaksanakan susun atur paralaks skrin penuh menggunakan HTML dan CSS

WBOY

Lepaskan： 2023-10-25 12:33:57

asal

1188 orang telah melayarinya

Bagaimana untuk melaksanakan susun atur paralaks skrin penuh menggunakan HTML dan CSS

Cara menggunakan HTML dan CSS untuk melaksanakan susun atur paralaks skrin penuh

Kesan paralaks skrin penuh ialah teknik yang sering digunakan dalam reka bentuk web boleh membawa pengguna pengalaman visual yang lebih kaya dan menarik. Artikel ini akan memperkenalkan cara menggunakan HTML dan CSS untuk melaksanakan reka letak paralaks skrin penuh yang ringkas dan memberikan contoh kod khusus.

Prinsip kesan paralaks adalah untuk mencipta tahap tiga dimensi yang berbeza dengan menatal berbilang lapisan imej latar belakang secara serentak pada kelajuan berbeza. Contoh kod berikut akan menggunakan penanda HTML dan gaya CSS untuk melaksanakan kesan paralaks skrin penuh yang mudah.

Pertama, kita perlu mencipta struktur bingkai asas dalam HTML. Tambahkan tiga elemen

dalam teg

<!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>

Salin selepas log masuk

Seterusnya, kita perlu menetapkan imej latar belakang yang berbeza untuk tiga lapisan latar belakang ini untuk mencapai kesan paralaks. Dalam kod di atas, kami menggunakan tiga teg Bagaimana untuk melaksanakan susun atur paralaks skrin penuh menggunakan HTML dan CSS untuk memaparkan imej latar belakang yang berbeza Anda perlu menggantikan laluan fail imej yang sepadan dengan laluan fail imej anda sendiri.

Akhir sekali, tambahkan gaya yang sepadan dalam teg untuk mengawal kedudukan lapisan paralaks dan keamatan kesan paralaks. Dengan menetapkan nilai translateZ atribut transform, kita boleh menukar kedalaman paralaks lapisan berbeza. Dalam contoh ini, kami menetapkan kedalaman paralaks lapisan latar belakang kepada -1px, kedalaman paralaks lapisan asas kepada 0 dan kedalaman paralaks lapisan latar depan kepada 1px.

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

Salin selepas log masuk

Dalam kod contoh di atas, kami juga menetapkan gaya

dan

, serta lapisan kandungan ringkas. Gaya ini ada untuk menjadikan reka letak paralaks berfungsi, tetapi juga boleh dilaraskan untuk memenuhi keperluan anda.

Ini ialah langkah asas dan contoh kod untuk melaksanakan reka letak paralaks skrin penuh yang mudah menggunakan HTML dan CSS. Anda boleh mengubah suai dan mengembangkannya lagi mengikut keperluan dan kreativiti anda untuk mencipta kesan paralaks skrin penuh yang lebih unik dan menarik. Saya harap artikel ini dapat membantu anda memahami dan mengamalkan reka letak paralaks skrin penuh!

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan susun atur paralaks skrin penuh menggunakan HTML dan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!