纯CSS Parallax底部空间太大

时间：2016-08-30 20:24:43

标签： html css twitter-bootstrap css3

我一直在试验我在这里找到的只有css的视差代码：http://keithclark.co.uk/articles/pure-css-parallax-websites/一切似乎都运行正常，但我在页面底部有太多空间。我已经尝试了几种不同的方法，定位，负边距等，我不能让它扼杀它。任何人都可以帮我指出正确的方向我做错了吗？

以下代码CodePen。

＆＃13;
＆＃13; 
body,
html {
  overflow: hidden;
}
.parallax {
  // font-size: 200%;

}
/* centre the content in the parallax layers */

.title {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
p {
  text-align: center;
}
.navbar {
  margin-bottom: 0px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
footer {
  color: white;
  font-size: 6rem;
}
/* Parallax base styles
--------------------------------------------- */

.parallax {
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
  -webkit-perspective-origin-x: 100%;
  perspective-origin-x: 100%;
  background: black;
}
.parallax__group {
  position: relative;
  height: 500px;
  /* fallback for older browsers */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  // font-size: 36px;
  color: lime;
}
.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform-origin-x: 100%;
  transform-origin-x: 100%;
}
.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
  color: red;
}
.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
  color: blue;
}
.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
  color: purple;
}
.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
  color: yellow;
}
/* style the groups
--------------------------------------------- */

// background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Conformal_grid_before_M%C3%B6bius_transformation.svg/2000px-Conformal_grid_before_M%C3%B6bius_transformation.svg.png');
// opacity: .5;
 #group1 {
  //z-index: 60; //slide under 2
  z-index: 5;
  /* slide over group 2 */
  // background: rgba(255, 60, 0,.75);
  // .parallax__layer--base,
  .parallax__layer--back {
    background: rgba(255, 60, 0, .75) url('https://unsplash.it/2560x2560?image=1043') center center;
  }
}
#group2 {
  // z-index: 50; //slide over 1 and under 2
  z-index: 3;
  /* slide under groups 1 and 3 */
  // background: rgba(59, 157, 102, 1);
  .parallax__layer--base {
    background: rgba(255, 255, 255, 1);
  }
  .parallax__layer--back {
    // background: rgba(88, 57, 91,1);

  }
}
#group3 {
  // z-index: 60; //slide under 2
  z-index: 4;
  /* slide over group 2 and 4 */
  .parallax__layer--fore {
    background: rgba(255, 255, 0, .5);
    // position: absolute;
    // left: 50%;
    // top: 50%;
    // -webkit-transform: translate(-50%, -25%);
    // transform: translate(-50%, -50%);

  }
  .parallax__layer--base {
    background: rgba(59, 157, 102, 1) url('https://unsplash.it/g/2560x2560?image=969') center center;
  }
}
#group4 {
  // z-index: 40; //slide under 3
  z-index: 2;
  /* slide under group 3 and 5 */
  background: white;
  // .parallax__layer--deep {
  //   background: rgba(255,255,0,.75) url('https://unsplash.it/2560x2560?image=823') center center;;
  // }

}
#group5 {
  // z-index: 50; // slide over 4
  z-index: 3;
  /* slide over group 4 and 6 */
  // background: rgba(214,229,100,.5);
  .parallax__layer--base {
    background: rgba(214, 229, 100, .5) url('https://unsplash.it/g/2560x2560?image=429') center center;
    ;
  }
}
#group6 {
  .parallax__layer--back {
    // margin-bottom: -56vh;
    // transform: unset;
    background: rgba(245, 235, 100, .5); // url('https://unsplash.it/g/2560x2560?image=210') center center;
    // background: black;

  }
}
#group7 {
  z-index: 3;
  /* slide over group 7 */
  #group7 .parallax__layer--base {
    background: rgb(255, 241, 100);
  }
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!--http://keithclark.co.uk/articles/pure-css-parallax-websites/-->
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>
        </li>
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a>
            </li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a>
            </li>
            <li><a href="#">Another action</a>
            </li>
            <li><a href="#">Something else here</a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="parallax">
  <div id="group1" class="parallax__group">
    <div class="parallax__layer parallax__layer--back">
      <!-- Base Layer -->
    </div>
    <div class="parallax__layer parallax__layer--fore">
      <div class="title">
        <img class="img-responsive" src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" style="margin: 0 auto; width: 50%; height: 50%" />
        <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          <br>
          <br>
          <a href="#" class="btn btn-default btn-lg">Lorem Ipsum</a>
        </p>
      </div>
      <!--         <div class="title">Foreground Layer</div> -->
    </div>
  </div>
  <div id="group2" class="parallax__group">
    <div class="parallax__layer parallax__layer--base" style="">
      <div class="title">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-4">
              <img class="img-responsive" src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" />
              <h3>Title</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-xs-12 col-sm-4">
              <img src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" />
              <h3>Title</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-xs-12 col-sm-4">
              <img src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" />
              <h3>Title</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="parallax__layer parallax__layer--back">
      <div class="title">
        <!-- Background Image -->
      </div>
    </div>
  </div>
  <div id="group3" class="parallax__group">
    <div class="parallax__layer parallax__layer--fore">
      <div class="title">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-8 col-sm-offset-2">
              <h1>Main Page Title</h1>
              <p class="lead">Doloremque sed qui impedit expedita illo ex beatae, dicta quo molestiae suscipit adipisci fuga inventore recusandae optio, totam possimus ipsa, enim explicabo aliquid rem autem culpa! Repellendus sunt animi voluptatem!</p>
            </div>
          </div>
        </div>

      </div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <!-- <div class="title">Base Layer</div> -->
    </div>
  </div>
  <div id="group4" class="parallax__group">
    <div class="parallax__layer parallax__layer--base">
      <div class="title">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-3">

            </div>
            <div class="col-xs-12 col-sm-3">
              <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.jpg" alt="" class="img-circle" />
              <h3>
                  Staff Name
                  <br>
                  <small>
                   Neque repudiandae itaque, vero dolores aperiam repellendus delectus in, quo dolor cupiditate.
                  </small>
                </h3>
            </div>
            <div class="col-xs-12 col-sm-3">
              <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.jpg" alt="" class="img-circle" />
              <h3>
                  Staff Name
                  <br>
                  <small>
                   Neque repudiandae itaque, vero dolores aperiam repellendus delectus in, quo dolor cupiditate.
                  </small>
                </h3>
            </div>
            <div class="col-xs-12 col-sm-3">

            </div>
          </div>
        </div>
      </div>
    </div>
    <!--       <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--deep">
        <div class="title">Deep Background Layer</div>
      </div> -->
  </div>

  <div id="group5" class="parallax__group">
    <div class="parallax__layer parallax__layer--fore">
      <div class="title">
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-4">
              <img class="img-responsive" src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" />
              <h3>Title</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-xs-12 col-sm-4">
              <img src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" />
              <h3>Title</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
            <div class="col-xs-12 col-sm-4">
              <img src="http://cubecreativedesign.com/dummyimage/600x400/000/fff" alt="" />
              <h3>Title</h3>
              <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <div class="title">Base Layer</div>
    </div>
  </div>

  <div id="group6" class="parallax__group">
    <div class="parallax__layer parallax__layer--back">
      <div class="title">Background Layer</div>
    </div>
    <!--<div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div> -->
  </div>
  <!--     <div id="group7" class="parallax__group">
      <div class="title">Base Layer</div> 
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
     </div> -->
</div>
＆＃13;
＆＃13;
＆＃13;

0 个答案:

没有答案
相关问题
最新问题