目录
- 1、连续滚动
- 2、间歇性向上滚动
- 3、任意个数向上滚动
本文主要记录了如何实现文字上下滚动效果,实现主要就是用到了css3的两个属性:
@framekeys
和
animation
1、连续滚动
<div class="scroll-continuous">
<div class="content">
<div class="item">1-12345dfgdfgdg6</div>
<div class="item">2-阿萨达dfgdfgdfgdfgdfgdfg</div>
<div class="item">3-aksfhaksfkasfh</div>
<div class="item">4-撒发顺丰大叔大叔大叔的</div>
<div class="item">5-撒打算大的撒十大啊大大撒是的啊大叔的a s s d</div>
</div>
</div>
<style>
.scroll-continuous {
position: relative;
width: 250px;
height: 40px;
overflow: hidden;
border: 1px solid #4d0074;
}
@keyframes rowup {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-20px);
}
50% {
transform: translateY(-40px);
}
75% {
transform: translateY(-60px);
}
100% {
transform: translateY(-80px);
}
}
.content {
width: 100%;
height: 100%;
padding: 10px 0;
animation: 10s rowup linear infinite normal;
}
.item {
height: 20px;
line-height: 20px;
padding-left: 5px;
color: #4d0074;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
</style>
2、间歇性向上滚动
实现其实和连续滚动原理差不多,只不过加上了停留的动画贞配置。
<div class="scroll-intermittent">
<div class="content">
<div class="item">1-12345dfgdfgdg6</div>
<div class="item">2-阿萨达dfgdfgdfgdfgdfgdfg</div>
<div class="item">3-aksfhaksfkasfh</div>
<div class="item">4-撒发顺丰大叔大叔大叔的</div>
<div class="item">5-撒打算大的撒十大啊大大撒是的啊大叔的a s s d</div>
</div>
</div>
<style>
.scroll-intermittent {
width: 250px;
height: 20px;
overflow: hidden;
border: 1px solid #4d0074;
}
@keyframes moveup {
0% {
transform: translateY(0px);
}
19% {
transform: translateY(0px);
}
/* 两贞使用相同的偏移,达成停下展示效果,展示时长=两贞百分比差x总动画时差,即:19%x10s=1.9s */
20% {
transform: translateY(-20px);
}
39% {
transform: translateY(-20px);
}
40% {
transform: translateY(-40px);
}
59% {
transform: translateY(-40px);
}
60% {
transform: translateY(-60px);
}
79% {
transform: translateY(-60px);
}
80% {
transform: translateY(-80px);
}
99% {
transform: translateY(-80px);
}
100% {
transform: translateY(-100px);
}
}
.content {
animation: 10s moveup linear infinite normal;
}
.item {
height: 20px;
line-height: 20px;
padding-left: 5px;
color: #4d0074;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
</style>
3、任意个数向上滚动
在上述实现的间歇性滚动中,有一个限制就是滚动的条数是有限制的,比较从样式表的配置就可以看到写法比较固定,如果要实现任意个数翻滚,那么就需要借助js进行动态修改animation
.
基于vue3实现如下:
<template>
<div class="scroll-wrap">
<div class="content" ref="contentRef">
<div v-for="item in scrollList" :key="item.id" class="item">
{{ item.text }}
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
const scrollList = [
{ text: "1-12345dfgdfgdg6", id: 1 },
{ text: "2-阿萨达dfgdfgdfgdfgdfgdfg", id: 2 },
{ text: "3-aksfhaksfkasfh", id: 3 },
{ text: "4-撒发顺丰大叔大叔大叔的", id: 4 },
{ text: "5- 撒打算大的撒十大啊大大撒是的啊大叔的a s s d", id: 5 },
{ text: "6-aksfhk但是非是的发送到发送地方ashfkasfh", id: 6 },
{ text: "7-akssfhk都非对方是的发送到发送地方ashfkasfh", id: 7 },
{ text: "8-aksfsfh的发送到发送到发送kashfkasfh", id: 8 },
{ text: "9-aksksfhk史蒂夫是的是的d sashfkasfh", id: 9 },
{ text: "10-aksfhka啊大撒打算大是的shfkasfh", id: 10 },
];
const contentRef = ref();
// 动态计算animation
function calcAnimation(totalFrames = 10, stepDistance = 20) {
const totalFrames = scrollList.length; // 滚动内容的数量
const stepDistance = 20; // 滚动的距离,须和滚动项高度保持一致,例如:style中的.item的height:20px,所以此处默认给了值为20
const duration = `${totalFrames * 2}s`; // 总滚动时间
let keyframeItems = "";
for (let i = 0; i <= totalFrames; i++) {
const percent = Math.floor(i * (100 / totalFrames));
const offset = -(i * stepDistance);
if ((percent !== 0 && percent !== 100) || i === totalFrames) {
keyframeItems += `${percent - 1}% { transform: translateY(${
i === 1 ? 0 : offset + 20
}px)}\n`;
}
keyframeItems += `${percent}% { transform: translateY(${offset}px); }\n`;
}
// 注意:动态修改vue样式的animation,要先通过insertRule()添加对应的@keyframes
document.styleSheets[0].insertRule(`@keyframes moveup {${keyframeItems}}`, 0);
contentRef.value.style.animation = `moveup ${duration} linear infinite normal`;
}
onMounted(() => {
calcAnimation();
});
</script>
<style scoped>
.scroll-wrap {
position: relative;
width: 250px;
height: 20px;
overflow: hidden;
border: 1px solid #4d0074;
}
.item {
height: 20px;
padding-left: 5px;
line-height: 20px;
font-size: 12px;
font-weight: 400;
color: #4d0074;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
}
</style>