视差模板中的中心Div / section元素

时间：2018-11-22 10:49:59

标签： html css

所以我有这个正在玩的视差模板，我想添加DIV元素，所以向下滚动后将显示DIV，但是问题是该元素移动到左侧，何时移动我在浏览器上缩小到右侧的25％都填满了。我该如何纠正？

Div moves to left

Zoom out DIV is filled on right

HTML 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Firewatch Parallax in CSS</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="parallax">
    <div class="parallax__layer parallax__layer__0">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
    </div>
    <div class="parallax__layer parallax__layer__1">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
    </div>
    <div class="parallax__layer parallax__layer__2">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
    </div>
    <div class="parallax__layer parallax__layer__3">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
    </div>
    <div class="parallax__layer parallax__layer__4">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
    </div>
    <div class="parallax__layer parallax__layer__5">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
    </div>
    <div class="parallax__layer parallax__layer__6">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
    </div>
    <div class="parallax__cover">
      <section class="section section_dark">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus,
          commodi,
          fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
        </p>
      </section>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>

</html>

CSS 

* {
  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: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */

}

.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);
}


.section {
  text-align: center;
  padding: 50px 80px;
    /* position: fixed; */
  /* z-index: 1; */
  /* left: 20px;
  right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */

}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}

3 个答案:

答案 0 :(得分：1)

您在.parallax元素上有一个负边距，这是因为它的位置是绝对的，因此应将其从包含元素的左边移0个单位：

body {
  margin: 0;
  position: relative;
}

.parallax {
  top: 0;
/*   left: 50%; */
  left: 0;
  right: 0;
  bottom: 0;
/*   margin-left: -1500px; */
}

单独执行上述操作应将元素居中，但您的img元素将比您给出的原始示例小。您可以通过以下方法解决此问题：将图像的高度设置为您满意的高度，宽度为100％，然后使用object-fit处理宽高比的倾斜： 

.parallax__layer img {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%; // set this to what you want
  object-fit: cover;
}

请参阅下面的完整演示：

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  position: relative;
}

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
/*   left: 50%; */
  left: 0;
  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;
  left: 0;
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.parallax__cover {
  background: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */

}

.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);
}


.section {
  text-align: center;
  padding: 50px 80px;
    /* position: fixed; */
  /* z-index: 1; */
  /* left: 20px;
  right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */

}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}
<div class="parallax">
    <div class="parallax__layer parallax__layer__0">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
    </div>
    <div class="parallax__layer parallax__layer__1">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
    </div>
    <div class="parallax__layer parallax__layer__2">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
    </div>
    <div class="parallax__layer parallax__layer__3">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
    </div>
    <div class="parallax__layer parallax__layer__4">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
    </div>
    <div class="parallax__layer parallax__layer__5">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
    </div>
    <div class="parallax__layer parallax__layer__6">
      <img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
    </div>
    <div class="parallax__cover">
      <section class="section section_dark">
        <h2>Section One</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus,
          commodi,
          fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
        </p>
      </section>
    </div>
  </div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

答案 1 :(得分：0)

通过调整.parallax类，我设法获得了result。

我删除了负边距并将左值设置为零，以将容器扩展为全角。

.parallax {
  -webkit-perspective: 100px;
  perspective: 100px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 0;
  /* left: 50%; -- removed */
  left: 0; /* added this to make it full-width */
  right: 0;
  bottom: 0;
  /* margin-left: -1500px; -- removed */
}

希望有帮助

答案 2 :(得分：0)

注释了一些应用于父视差div .parallax的定位样式，因为这会将整个内容拖到屏幕外的左侧。

尝试将图像.parallax__layer img居中，方法是将尺寸增加到300％，并添加负的左右边距。

* {
  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;
  width:300%;
  right:-100%;
  left-:-100%;
}

.parallax__cover {
  background: rgb(199, 27, 187);
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 2000px;
  z-index: 2;
  /* left: 20%; */

}

.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);
}


.section {
  text-align: center;
  padding: 50px 80px;
    /* position: fixed; */
  /* z-index: 1; */
  /* left: 20px;
  right: 20px; */
  line-height: auto;
  box-shadow: 0px 0px 40px -1px #000000bf;
  /* left: 80%; */

}

.section_dark {
  background-color: #282e34;
  color: #ddd;
}

相关问题
最新问题