Переполнение CSS X оставляет пустое пространство - PullRequest
Новая
       94

Переполнение CSS X оставляет пустое пространство

0 голосов
/ 20 мая 2018

В настоящее время я создаю онлайн-портфолио и пытаюсь использовать параллакс 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, который ничего не сделал для решения проблемы.Любая помощь будет принята с благодарностью.

Примечание. Живой сайт: здесь

1 Ответ

0 голосов
/ 20 мая 2018

Добавление 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>
...