Question

我想复制这里显示的效果 -

~~https://allods.my.com/en/news~~ （不是这个，对不起）

http://bit.do/b2692

https://www.google.co.in/sheets/about

忽略所有动画，我想知道如何在页面向下滚动时实现多个不同的背景。

PS。我是一个完全的初学者，我更喜欢只有HTML / CSS解决方案。

Answer 1

您应该尝试将位置固定属性添加到您的背景中，它应该有帮助。

＆＃13;

body,
html,
main {
  /* important */
  height: 100%;
}
.fixed-bg {
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
.fixed-bg.bg-1 {
  background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");
}
.fixed-bg.bg-2 {
  background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
}
.fixed-bg.bg-3 {
  background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
  background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
  min-height: 100%;
}

＆＃13;

<main>
  <div class="fixed-bg bg-1">
    <h1><!-- title goes here--></h1>
  </div>

  <div class="scrolling-bg cd-color-2">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
      </p>
    </div>
  </div>
  <div class="fixed-bg bg-2">
    <h1><!-- title goes here --></h1>
  </div>

  <div class="scrolling-bg color-2">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
      </p>
    </div>
  </div>
  <div class="fixed-bg bg-3">
    <h1><!-- title goes here --></h1>
  </div>

  <div class="scrolling-bg color-2">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
      </p>
    </div>
  </div>
  <div class="fixed-bg bg-4">
    <h1><!-- title goes here --></h1>
  </div>

  <div class="scrolling-bg color-2">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
      </p>
    </div>
  </div>
</main>

＆＃13;

Div之后的方法：

＆＃13;

body,
html,
main {
  /* important */
  height: 100%;
  padding:0;
  margin:0;
}
.container{
position:absolute;

}

.fixed-bg {
  min-height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  
}
.fixed-bg.bg-1 {
  background-image: url("https://c7.staticflickr.com/8/7052/6803328782_432e1dd481_b.jpg");

  
}
.fixed-bg.bg-2 {
  background-image: url("https://imagesus-ssl.homeaway.com/mda01/b8b73d34-98e2-4633-ab05-6797a99bcf2e.1.10/Cocoa-Beach-Pier-with-Disney-cruise-ship-in-background.jpg");
  
  
}
.fixed-bg.bg-3 {
  background-image: url("http://static.fly4free.pl/s/2015/4/f/f6dc42b71e7ef2336edbfbc8c9124684.jpeg");
}
.fixed-bg.bg-4 {
  background-image: url("http://coachhouse.com.au/default/assets/File/kayak.jpg");
}
.scrolling-bg {
  min-height: 100%;
 
}

＆＃13;

<main>
  <div class="fixed-bg bg-1">
    <div class="container"><!-- content goes here--></div>
    </div>
  
  <div class="fixed-bg bg-2">
   <div class="container"><!-- content goes here--></div>
  </div>

  
  <div class="fixed-bg bg-3">
   <div class="container"><!-- content goes here--></div>
  </div>

  
  <div class="fixed-bg bg-4">
   <div class="container"><!-- content goes here--></div>
  </div>

 
</main>

＆＃13;

答案 1 :(得分：1)

所以你正在寻找视差效果，有很多插件可供选择。我最近使用了http://pixelcog.github.io/parallax.js/，这对我很有帮助。

使用起来非常简单。你说你想要一个HTML / css解决方案，但我不认为你可以在没有javascript的情况下做到这一点。如果其他人在没有javascript的情况下知道替代方案，我也希望看到它。但即使您不太了解javascript，也可以使用此插件，只需按照我提供的链接上的说明操作即可。

该插件需要jquery才能工作！

Answer 2

所以你正在寻找视差效果，有很多插件可供选择。我最近使用了http://pixelcog.github.io/parallax.js/，这对我很有帮助。

使用起来非常简单。你说你想要一个HTML / css解决方案，但我不认为你可以在没有javascript的情况下做到这一点。如果其他人在没有javascript的情况下知道替代方案，我也希望看到它。但即使您不太了解javascript，也可以使用此插件，只需按照我提供的链接上的说明操作即可。

该插件需要jquery才能工作！

如何在滚动上实现不同的背景

2 个答案: