CSS 实现滚动视差

Question

CSS 实现滚动视差

Opened this issue 5 years ago · 1 comments

background-attachment：fixed(背景相对于视口固定)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      section {
        height: 100vh;
        background: rgba(0, 0, 0, 0.7);
        color: #fff;
        line-height: 100vh;
        text-align: center;
        font-size: 20vh;
      }

      .g-img {
        background-attachment: fixed;
        background-size: cover;
        background-position: center center;
      }

      .g-img1 {
        background-image: url("http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg");
      }

      .g-img2 {
        background-image: url("http://up.enterdesk.com/edpic_source/21/00/00/210000f8e772d7fc0758e67ae4b48807.jpg");
      }

      .g-img3 {
        background-image: url("https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=");
      }
    </style>
  </head>
  <body>
    <section class="g-word">Header</section>
    <section class="g-img g-img1">IMG1</section>
    <section class="g-word">Content1</section>
    <section class="g-img g-img2">IMG2</section>
    <section class="g-word">Content2</section>
    <section class="g-img g-img3">IMG3</section>
    <section class="g-word">Footer</section>
  </body>
</html>

Answer 1 · 2019-11-24T09:20:22.000Z

利用 transform-style

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      html {
        height: 100%;
        overflow: hidden;
      }

      body {
        margin: 0;
        padding: 0;
        perspective: 2px;
        transform-style: preserve-3d;
        transform-origin: center center;
        height: 100%;
        overflow-y: scroll;
        overflow-x: hidden;
      }

      .g-container {
        position: relative;
        height: 150%;
      }

      .g-container > div {
        font-size: 5vw;
        position: absolute;
        top: 20%;
      }

      .section-one {
        left: 0%;
        background: rgba(10, 10, 10, 0.2);
        transform: translateZ(-1px);
      }

      .section-two {
        left: 40%;
        background: rgba(30, 130, 30, 0.2);
        transform: translateZ(-2px);
      }

      .section-three {
        left: 90%;
        background: rgba(200, 100, 130, 0.2);
        transform: translateZ(-3px);
      }
    </style>
  </head>
  <body>
    <div class="g-container">
      <div class="section-one">translateZ(-1)</div>
      <div class="section-two">translateZ(-2)</div>
      <div class="section-three">translateZ(-3)</div>
    </div>
  </body>
</html>