CSS 实现滚动视差 - Githubissues

OPY-bbt / OPY-bbt.github.io

my webpage

0 stars 0 forks source link

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>

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

OPY-bbt / OPY-bbt.github.io

CSS 实现滚动视差 #22