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

问题描述

问 题

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

解决方案

谢邀。

    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动画，代码大致是上面这段。自己学习一下吧。

这篇关于javascript - 又拍云主页的线段特效是怎么做出来的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！