Jquery water flow through pipe Effect [closed]

Question

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/

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

Answer 1

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.

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>