Question

我正在尝试重新创建此页面http://demos.themetrust.com/hero/上发现的效果，当内容出现在横幅上时，会产生轻微的视差效果。

我不确定如何做到这一点，我发现的大多数视差教程要么是完全不同的视差风格，要么是css驱动的视觉教程，它们并没有真正为网站增添太多。有人能够指出我可以从中学习的合适教程或项目的方向。我一直在＆＃34; parallax banner下搜索，＆＃34;但是，也许我的效果名称错了？

Answer 1

以下是纯CSS视差滚动的示例。关键是像

这样的行

 transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);

也许看看这个Q＆amp; A Pure CSS parallax without fixed background height?

以下是我的例子：

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Nunito);
 html {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  padding: 0;
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  font-family: Nunito;
}
h1 {
  font-size: 250%
}
p {
  font-size: 140%;
  line-height: 150%;
  color: #333;
}
.slide {
  position: relative;
  padding: 25vh 10%;
  min-height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
  transform-style: inherit;
}
img {
  position: absolute;
  top: 50%;
  left: 35%;
  width: 320px;
  height: 240px;
  transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
  padding: 10px;
  border-radius: 5px;
  background: rgba(240, 230, 220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
  transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.title {
  padding: 5%;
  border-radius: 2px;
  background: rgba(240, 230, 220, .7);
  box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
  margin-left: 0;
  margin-right: auto;
}
.slide:nth-child(2n+1) .title {
  margin-left: auto;
  margin-right: 0;
}
.slide,
.slide:before {
  background: 50% 50% / cover;
}
.header {
  text-align: center;
  font-size: 175%;
  color: #fff;
  text-shadow: 0 2px 2px #000;
}
#title {
  background-image: url("http://lorempixel.com/640/480/abstract/6/");
  background-attachment: fixed;
}
#slide1:before {
  background-image: url("http://lorempixel.com/640/480/abstract/4/");
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}
#slide2 {
  background-image: url("http://lorempixel.com/640/480/abstract/3/");
  background-attachment: fixed;
}
#slide3:before {
  background-image: url("http://lorempixel.com/640/480/abstract/5/");
  transform: translateZ(-1px) scale(2);
  z-index: -1;
}
#slide4 {
  background: #222;
}

＆＃13;

<div id="title" class="slide header">
  <h1>Your page title</h1>
</div>

<div id="slide1" class="slide">
  <div class="title">
    <h1>Part one</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
      viris docendi denique vim.</p>
  </div>
</div>

<div id="slide2" class="slide">
  <div class="title">
    <h1>Another part</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
      viris docendi denique vim.</p>
  </div>
</div>

<div id="slide3" class="slide">
  <div class="title">
    <h1>Addendum</h1>
    <p>Lorem ipsum dolor sit amet, in velit iudico mandamus sit, persius dolorum in per, postulant mnesarchum cu nam. Malis movet ornatus id vim, feugait detracto est ea, eam eruditi conceptam in. Ne sit explicari interesset. Labores perpetua cum at. Id
      viris docendi denique vim.</p>
  </div>
</div>

<div id="slide4" class="slide header">
  <h1>The End</h1>
</div>

＆＃13;

Answer 2

我理解的技巧是用css设置背景照片＆＃34;修复＆＃34;在网址的末尾。背景大小有助于将照片放入容器中，并且几乎不需要重置。

＆＃13;

#example{
  margin-top:10em;
  background:url('https://static.pexels.com/photos/3247/nature-forest-industry-rails.jpg') fixed;
  background-size: cover;
  height:300px;
}
body{
  height:2000px;
}

＆＃13;

<div id="example"></div>

＆＃13;

简单的视差滚动 - 横幅上的内容幻灯片

2 个答案: