HTML과 CSS를 사용하여 전체 화면 시차 레이아웃을 구현하는 방법-HTML 튜토리얼-php.cn

HTML과 CSS를 사용하여 전체 화면 시차 레이아웃을 구현하는 방법

전체 화면 시차 효과는 웹 디자인에서 자주 사용되는 기술로, 사용자에게 더욱 풍부하고 매력적인 시각적 경험을 선사할 수 있습니다. 이 기사에서는 HTML과 CSS를 사용하여 간단한 전체 화면 시차 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

시차 효과의 원리는 여러 레이어의 배경 이미지를 서로 다른 속도로 동시에 스크롤하여 다양한 수준의 3차원성을 생성하는 것입니다. 다음 코드 예제에서는 HTML 마크업과 CSS 스타일을 사용하여 간단한 전체 화면 시차 효과를 구현합니다.

먼저 HTML에서 기본 프레임 구조를 만들어야 합니다. 시차 효과를 위한 배경 레이어 역할을 하려면

태그에 세 개의

요소를 추가하세요.

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

로그인 후 복사

다음으로 시차 효과를 얻으려면 이 세 가지 배경 레이어에 대해 서로 다른 배경 이미지를 설정해야 합니다. 위 코드에서는 세 개의 HTML과 CSS를 사용하여 전체 화면 시차 레이아웃을 구현하는 방법 태그를 사용하여 다양한 배경 이미지를 표시합니다. 해당 이미지 파일 경로를 사용자 고유의 이미지 파일 경로로 바꿔야 합니다.

마지막으로