jquery水流通過管道效果

Question

我想爲本地管道公司創建一個單頁面滾動網站。我心中有一個想法，需要像一個在效果：

http://sidigital.co/

任何人都可以給我建議任何JS/jQuery插件「流經管道水」的概念呢？

Answer 1

那麼這主要是通過使用CSS3而不是JavaScript效果來實現的。您可以編寫一個腳本，將特定的CSS事件與滾動功能結合起來，如parallax effect，效果如this fiddle所示。

CSS代碼的Cuz我不能post the link as is：

CSS

#progressbar { 
    background-color: black; 
    border-radius: 8px; 
    padding: 3px; 
    width: 400px; 
} 

#progressbar div { 
    background-color: #0063C6; 
    width: 50%; 
    height: 10px; 
    border-radius: 5px; 
    animation:loadbar 2s; 
    -webkit-animation:loadbar 2s; 
} 

@keyframes loadbar { 
    0% { 
     width: 0%; 
    } 
    100% { 
     width: 50%; 
    } 

} 

@-webkit-keyframes loadbar { 
    0% { 
     width: 0%; 
    } 
    100% { 
     width: 50%; 
    } 
} 

HTML

<div id="progressbar"> 
<div></div>