javascript - 又拍云主页的线段特效是怎么做出来的？

Question

https://www.upyun.com/index.html
这个页面打开之后从banner上会有一条线往下画，你滚动条滚动到什么位置，那根线就会缓慢画到相应的位置，这个是怎么实现的啊？我看了源代码看不懂。。。

Answer 1

谢邀。

    function() {
        function n() {
            var n = ((0,
            r.createNew)(".banner-slides"),
            (0,
            i.createNew)(".coverage .animated-line", 1, 1))
              , e = (0,
            i.createNew)(".speed .animated-line", 1, 2)
              , o = (0,
            i.createNew)(".monitor .animated-line", 1, 3)
              , a = (0,
            i.createNew)(".safety .animated-line", 1, 4);
            window.addEventListener("scroll", function() {
                t(n, e, o, a)
            })
        }
        function t(n, t, e, r) {
            window.pageYOffset >= 150 && !n.onSection ? (n.animationGo(),
            n.onSection = !0) : window.pageYOffset < 150 && n.onSection && (n.animationBack(),
            n.onSection = !1),
            window.pageYOffset >= 750 && !t.onSection ? (t.animationGo(),
            t.onSection = !0) : window.pageYOffset < 750 && t.onSection && (t.animationBack(),
            t.onSection = !1),
            window.pageYOffset >= 1540 && !e.onSection ? (e.animationGo(),
            e.onSection = !0) : window.pageYOffset < 1540 && e.onSection && (e.animationBack(),
            e.onSection = !1),
            window.pageYOffset >= 2200 && !r.onSection ? (r.animationGo(),
            r.onSection = !0) : window.pageYOffset < 2200 && r.onSection && (r.animationBack(),
            r.onSection = !1)
        }
        document.addEventListener("DOMContentLoaded", n)
    }()

监听窗口的滚动事件，然后触发svg动画，代码大致是上面这段。自己学习一下吧。

Answer 2

简单思路就是将 svg 的 path 拆分独立的动画部分，利用 svg 的 stroke-dasharray 和 stroke-dashoffset 属性搭配 transition，来实现线条动态绘制效果。然后根据在页面上监听的滚动位置，启动对应的动画。

Answer 3

谢邀，fullpage这个里面有每屏滚动的时候触发一个事件，还有这个事件是否重复触发。你可以去看看。然后那个线。你可以用图片啊。用什么的代替