用css和javascript的HTML背景

Question

我對http://startupgiraffe.com/的背景一無所知

我已經搜索了很多關於用shape和css創建背景但沒有用的東西。 有人可以指導我創建像http://startupgiraffe.com/這樣的背景。

謝謝

Answer 1

第一步是啟動Chrome的開發工具（或任何你喜歡的東西 - Chrome很好），轉到網絡，然后點擊底部的圖片：

這可以讓你看到發生了什么。

簡而言之，CSS中的絕對定位+大量圖像。

Answer 2

正如你在源代碼op startupgiraffe中看到的那樣; 有多個“背景”部分：

<section id="background-wrapper" class="full-wrapper">

  <section id="first-background">
    <div id="scroll-trigger"></div>
  </section>

  <section id="second-background">
  </section>

  <section id="third-background">
  </section>

  ----

</section>

他們使用了大量的javascripting來動態切換背景部分，從而形成連接的背景。

如果您想復制此行為或了解有關它的更多詳細信息，我建議您開始查看html，css和javascript的源代碼。 您還可以使用瀏覽器分析工具（firebug，chrome的控制台）來了解更多網站的行為。