Question

我目前正在创建一个在线投资组合，我正在尝试使用视差CSS来获得良好的滚动效果。我有一个类，它将某些样式和格式应用于不同部分的div。

长话短说，为避免视差溢出使页面太宽，我隐藏了x溢出，因此它缩短为视口宽度。但是，这会在屏幕左侧留下一些空白，这真的很烦人。

* {
  padding: 0;
  margin: 0;
}

body {
  font: 100% / 1.5;
}

#homeSplash {
  background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
  background-size: cover;
  color: white;
  text-align: center;
}

#title {
  background: rgba(255, 255, 255, 0.75);
  padding: 50px;
  font-family: 'Ubuntu Condensed', sans-serif;
}

#title h3,
h4,
h1 {
  padding: 10px;
}

.parallax {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
  font-size: 200%;
}

.parallax__group {
  position: relative;
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}

#group2 {
  z-index: 3;
}

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="parallax">
  <div id="group2" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">
        <div id="title">
          <h1>Welcome</h1>
          <h3>I am Luca Passariello</h3>
          <h4>Welcome to my Portfolio</h4>
        </div>
      </div>
    </div>
    <div id="homeSplash" class="parallax__layer parallax__layer--back">
    </div>
  </div>
</div>

我尝试使用width: 100vw，它没有帮助解决问题。任何帮助将不胜感激。

注意 - 实际网站为here

Answer 1

将width:100vw添加到.parallax__group解决了问题。

*{
  padding: 0;
  margin: 0;
}
body{
  font: 100% / 1.5;
  margin: 0;
}
#homeSplash {
    background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
    background-size: cover;
    color: white;
    text-align: center;
}
#title{
  background: rgba(255, 255, 255, 0.75);
  padding: 50px;
  font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3, h4, h1{
  padding: 10px;
}
.parallax {
  height: 100vh;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-perspective: 300px;
  perspective: 300px;
  font-size: 200%;
}


.parallax__group {
  position: relative;
  height: 500px; /* fallback for older browsers */
  height: 100vh;
  width: 100vw;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);


 transform: translateZ(90px) scale(.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
}
#group2 {
  z-index: 3;
}
.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="parallax">
      <div id="group2" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
          <div class="title">
            <div id="title">
              <h1>Welcome</h1>
              <h3>I am Luca Passariello</h3>
              <h4>Welcome to my Portfolio</h4>
           </div>
         </div>
        </div>
        <div  id="homeSplash" class="parallax__layer parallax__layer--back"
        </div>
      </div>
   </div>
   </div>

CSS X溢出留下空白

1 个答案: