Jquery水流通管效果

我正在尝试为Local Plumbing Company创建一个单页可滚动的网站。 我有一个想法，需要像下面那样的效果：

http://sidigital.co/

任何人都可以建议我任何JS / Jquery插件为这个“水流通管”概念？

Answer 1

嗯，这主要是使用CSS3而不是JavaScript效果实现的。 您可以编写一个脚本，将特定的CSS事件与滚动function相结合，例如视差效果和此小提琴上看到的效果。

CSS代码因为我无法按原样发布链接 ：

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