分类：无缝滚动

2020
11-29

在Vue中使用CSS3实现内容无缝滚动的示例代码

一、效果预览最近在做一个活动页面，遇到幸运用户中奖的滚动公告需求。下面是实现效果：（gif录制略显卡顿，实际效果很流畅）二、无缝滚动原理1、容器宽高固定，超出内容隐藏；2、内容准备2份，现参与滚动的内容有A、B两份，向左滚动；3、滑动过程中，B份紧随A份之后，营造出无缝滚动回来的效果；4、在A部分内容完全滚出容器的一瞬间，立刻将AB内容位置复原，由于A、B内容一模一样，这个复原过程很难看出来；5、循环第3步；三、代... 继续阅读 >

2020
09-28

JS实现单张或多张图片持续无缝滚动的示例代码

背景：想要实现图片持续滚动，既然使用js,就千万不要加css动画、过渡等相关样式，如果想要滚动的平滑一下，可以一像素一像素的感动，则很平滑，如果加了过渡动画，当图片重置为0时，会有往回倒的动画效果，跟预期不符。原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插入在结尾，来实现无缝拼接，前提：1、必须是没有设置过渡动... 继续阅读 >