Html 如何将内容直接添加到屏幕外滚动到视图的视差部分底部下方?

Html 如何将内容直接添加到屏幕外滚动到视图的视差部分底部下方?,html,css,parallax,Html,Css,Parallax,这里有一个非常酷的视差效果: 福吧巴兹酒店 但是在HTML底部添加的任何文本都会在页面顶部呈现,并且不会随视差滚动 当用户向下滚动时,如何让内容从页面下方滚动到视图中?解决方案是将内容放在div.parallax\uu封面中,然后将所有左边距和左边距更改为0很好,您已经回答了自己的问题。提问和回答之间的间隔是11分钟。看来你在这里发帖之前没怎么试过你说得对,我在发帖之前根本没试过。考虑到我只花了一个小时的时间与stackoverflow搏斗,我试图从stackoverflow中获得免费劳动

这里有一个非常酷的视差效果:


福吧巴兹酒店
但是在HTML底部添加的任何文本都会在页面顶部呈现,并且不会随视差滚动


当用户向下滚动时,如何让内容从页面下方滚动到视图中?

解决方案是将内容放在
div.parallax\uu封面
中,然后将所有
左边距
左边距
更改为
0

很好,您已经回答了自己的问题。提问和回答之间的间隔是11分钟。看来你在这里发帖之前没怎么试过你说得对,我在发帖之前根本没试过。考虑到我只花了一个小时的时间与stackoverflow搏斗,我试图从stackoverflow中获得免费劳动力。
* {
  box-sizing: border-box;
}

html,
body {
  background-color: #FEDCC8;
}

.parallax {
  -webkit-perspective: 100px;
          perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  margin-left: -1500px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
}

.parallax__cover {
  background: #2D112B;
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
}

.parallax__layer__0 {
  -webkit-transform: translateZ(-300px) scale(4);
          transform: translateZ(-300px) scale(4);
}

.parallax__layer__1 {
  -webkit-transform: translateZ(-250px) scale(3.5);
          transform: translateZ(-250px) scale(3.5);
}

.parallax__layer__2 {
  -webkit-transform: translateZ(-200px) scale(3);
          transform: translateZ(-200px) scale(3);
}

.parallax__layer__3 {
  -webkit-transform: translateZ(-150px) scale(2.5);
          transform: translateZ(-150px) scale(2.5);
}

.parallax__layer__4 {
  -webkit-transform: translateZ(-100px) scale(2);
          transform: translateZ(-100px) scale(2);
}

.parallax__layer__5 {
  -webkit-transform: translateZ(-50px) scale(1.5);
          transform: translateZ(-50px) scale(1.5);
}

.parallax__layer__6 {
  -webkit-transform: translateZ(0px) scale(1);
          transform: translateZ(0px) scale(1);
}