2010-06-25 128 views
5

那天我正好訪問這個網站: -如何使用javascript創建此效果?

http://www.peter-pearson.com/

誰能告訴我怎樣才能創建這個涼爽的效果。我知道如何使用JQuery的localScroll水平或垂直滾動​​頁面。但是,如果你已經看過網頁,仔細看看這些線條在背景上運行的美妙程度。如果有人能告訴我這種效果是如何創建的,我會非常感激:)

回答

4

PNG與Alpha透明度,在一個背景:
http://www.peter-pearson.com/images/flow5.png
http://www.peter-pearson.com/images/stripey1.jpg

[編輯]

這不是真的一個動畫,但一個小技巧,基於透明度。
想象以下HTML:

<div class="div1"> 
    <div class="div2"> 
    </div> 
</div> 

DIV1具有條紋圖案的背景圖像,定位爲固定的,所以當滾動它會移動。
div2具有部分透明背景圖像,不是固定的。

所以當你滾動頁面時,模式圖像會出現在某些地方,因爲其他背景圖像是透明的,給你一種動畫效果。

+0

感謝Macmade,但它看起來像動畫? – TCM 2010-06-25 09:28:30

+0

我不是設計師。請詳細解釋一下它背後的概念。它如何動畫? – TCM 2010-06-25 09:29:37

+0

看到編輯...:) – Macmade 2010-06-25 13:15:26

0
+0

他已經指定他想要行的效果。這部分他已經知道了。嘗試在滾動時關注頁面的左側。一個美麗的線是在頁面 – 2010-06-25 09:22:05

+0

您好smeg4brains,我知道這一點。但是,如果仔細查看網頁,請參閱線條,後臺運行的三行以及它們的動畫效果。我其實在談論這個。 – TCM 2010-06-25 09:22:30