简单视差滚动 - 内容在横幅上滑动

Question

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

我不确定该怎么做，而且我发现的大多数视差教程要么是截然不同的视差风格，要么是 css 驱动的视差教程，它们并没有真正为网站添加太多内容.有人能指出我可以从中学习的合适教程或项目的方向吗？我一直在 "parallax banner," 下搜索，但是，也许我弄错了效果的名称？

Answer 1

据我了解，技巧是在 css 中设置背景照片，在 url 末尾设置 "fixed"。 background-size 有助于将照片放入容器中，并且几乎不需要重置。

#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;
}

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

Answer 2

这是一个纯 CSS 视差滚动的示例。关键是像

这样的行

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

也许也看看这个问答

这是我的例子：

@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;
}

<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>

简单视差滚动 - 内容在横幅上滑动

Simple Parallax Scroll - Content Slides over Banner

javascript

jquery

html

parallax