如何移动图像在固定路径上的用户滚动

How to move image on fixed path on user scroll

本文关键字：路径 滚动 用户 何移动 移动 图像      更新时间：2023-09-26

我做了这个管道演示作为我要做的一个例子。管道和背景颜色跨越3div，并且我有一个小发光球，我想在用户向下滚动页面时沿着管道移动。在管道的水平部分，我想创建一个扩展的div，但首先，下面是代码:

<!DOCTYPE html>
<html>
<head>
<style>
.canvas {
background-image: url(/images/piping_demonstration2.png);
}
#glow {
background-image: url(/images/glow.png);
background-attachment: fixed;
}
.dadiv {
height: 500px;
}
</style>
</head>
<body>
<section class="canvas">
    <div id="glow">
<div id="first" class="dadiv" height="500px"></div>
<div id="second"class="dadiv" height="500px"></div>
<div id="third" class="dadiv" height="500px"></div>
</div>
</section>
</body>
</html>

我明白我将不得不使用JavaScript，但我还没有能够找到一个好的源代码开始。

查看jQuery插件Scrollpath: http://joelb.me/scrollpath/。

不再维护，但源代码(https://github.com/JoelBesada/scrollpath)应该是一个很好的起点。

相关文章：