文章/答案/技术大牛

发布

问视差滚动实现
EN

Stack Overflow用户

提问于 2020-04-26 19:20:27

回答 1查看 35关注 0票数 0

我遵循了一个关于视差滚动的教程，并得出了以下结论：

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }

        .parallax {
            position: absolute;
            left: 0;
            height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
            perspective: 1px;
            margin: 0;
        }

        .parallax_layer_back {
            position: absolute;
            left: 0;
            right: 0;
            height: 650px;
            top: -150px;
            background-size: cover;
            transform: translateZ(-1px);
            background-image: url(https://www.rgraph.net/images/front-page-sidebar-background1.jpg);
            background-position: 0px;
            margin: -250px -1500px 0 -1500px;
        }

        .parallax_layer_front {
            transform: translateZ(0);
            margin-top: 230px;
            background-color: white;
            padding: 25px;
            padding-top: 10px;
        }
    </style>
</head>

<body>

    <div class="parallax">

        <div class="parallax_layer_back"></div>

        <div class="parallax_layer_front">

            <h1>Beautiful javascript charts for your websites</h1>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>

        </div>
    </div>

</body>
</html>

但我没有成功地将顶部的层转换为页面右侧-side的层，就像RGraph网站上的：https://www.rgraph.net

有谁能建议如何做到这一点吗？

html

css

scroll

parallax

回答 1

Stack Overflow用户

发布于 2020-04-26 20:03:51

只要改变一下结构和css就行了。

body {
    margin: 0;
}

.parallax {
    color:#fff;
}
.container{
  width: 950px;
  margin:0px auto;
  background: #00000070;
  overflow: hidden;
  padding: 50px;
}

.parallax_layer_back {

position: relative;
background-attachment: fixed;
background-size: cover;
background-position: center;
padding:50px 0px;

}
.parallax_layer_one{
  background-image: url(https://www.rgraph.net/images/front-page-sidebar-background1.jpg);
}
.parallax_layer_two{
  background-image: url(https://www.rgraph.net/images/front-page-sidebar-background2.jpg);
}

.parallax_layer_front {
    transform: translateZ(0);
    margin-top: 230px;
    background-color: transparent;
    padding: 25px;
    padding-top: 10px;
}

<!DOCTYPE html>
<html>
<head>
   <title>Parallax Page</title>
</head>

<body>

    <div class="parallax">

        <div class="parallax_layer_back parallax_layer_one">
          <div class="container">
            <h1>Beautiful javascript charts for your websites</h1>

            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
            <p>
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
            </p>
  
          </div>

        </div>

        <div class="parallax_layer_back parallax_layer_two">
            <div class="container">
              <h1>Beautiful javascript charts for your websites</h1>

              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
              <p>
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
                  guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu guy guy gyu guy gyu gyu gyu 
              </p>
    
            </div>
         
      </div>

    </div>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61446706

复制

相似问题

问视差滚动实现
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视差滚动实现EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问视差滚动实现
EN