主页 / 问题 / 551971
Accepted
Sevastopol'
Asked:2020-08-04 21:36:32 +0000 UTC2020-08-04 21:36:32 +0000 UTC

滚动页面时阻止沿曲线移动

  • 772

下午好！请告诉我这是怎么做到的。在此页面的示例中 - http://krym.dramina.ru（按下“开始旅程”按钮后）。同时，当页面向下滚动时，在背景中绘制一条曲线（路线）。当滚动浏览某些块（文本）时，线条的移动变得静止，然后再次继续。这对我来说很有趣。我想在一些特定的最小示例中看到这一点，其中脚本代码和样式以及 html 标记本身将清晰可见，以便理解此类实现的逻辑。我将非常感谢你的例子！

javascript

2 个回答

  1. Best Answer

    如果您查看代码，那么绘图将转到 crimea-app.js 和 crimea-watter。用两个词实现。1 有一个带有部分的块文本

    <div>
   <section data-zoom-start="2" data-stay="true">...</section>
   <section data-zoom-start="2" data-stay="true">...</section>
<div>
    1. 带有地图的画布被实例化。当滚动到某个块时，onScroll 事件会在断点所在 (data-stay=true) 处触发，并且图像坐标会随着地图移动而发生变化。路线是使用画布方法绘制的。即 beginPath() 开始绘制 moveTo(x, y) 设置绘制点的位置 lineTo(x, y) arc 生成弧。结果是路线曲线。
    • 11

  2. 看向 Parallax.js 它旨在创建交互式滚动，例如在这个网站上http://ttl.by/ru/

    • 1

相关问题