Question

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

任何人都可以建议我使用任何JS / Jquery插件来处理这种“流过管道的水”概念吗？

Answer 1

这主要是使用CSS3而不是JavaScript效果实现的。您可以编写一个脚本，该脚本将特定的CSS事件与滚动函数相结合，例如parallax effect和this fiddle上显示的效果。

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水流通过管道效果

1 个答案: