https://www.upyun.com/index.html
这个页面打开之后从banner上会有一条线往下画,你滚动条滚动到什么位置,那根线就会缓慢画到相应的位置,这个是怎么实现的啊?我看了源代码看不懂。。。
谢邀,fullpage这个里面有每屏滚动的时候触发一个事件,还有这个事件是否重复触发。你可以去看看。然后那个线。你可以用图片啊。用什么的代替
简单思路就是将 svg 的 path 拆分独立的动画部分,利用 svg 的 stroke-dasharray 和 stroke-dashoffset 属性搭配 transition,来实现线条动态绘制效果。然后根据在页面上监听的滚动位置,启动对应的动画。
谢邀。
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动画,代码大致是上面这段。自己学习一下吧。