Jquery水流经管道效应 [英] Jquery water flow through pipe Effect

问题描述

我正在为本地水暖公司创建一个可单页滚动的网站。我有一个想法，需要一个像下面的效果：

I am trying to create a Single-Page Scrollable website for a Local Plumbing Company. I had a thought in mind which requires an effect like the one at :

http://sidigital.co/

任何人都可以为这个Water flowing through pipeConcept提供任何JS / Jquery插件？

Can anyone suggest me any JS/Jquery Plugin for this "Water flowing through pipe" Concept?

推荐答案

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

Well this is mostly achieved using CSS3 more than a JavaScript effect. You could possible write a script that combines firing specific CSS events with a scrolled function, like the parallax effect and the effect as seen on this fiddle.

CSS代码cuz我无法将链接发布为：

The CSS Code cuz I am not able to 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>

这篇关于Jquery水流经管道效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！