文本“走马灯”看似简单，实际也不复杂

前端代码仔2024-11-06 18:45

前言

在日常项目中，需要实现文本【横向】或【纵向】滚动，

  1. 无逢滚动（从左边界消失的同时立即从右边界出来）------ 【贪吃蛇效果】
  2. 距离一定的位置进行滚动（文本从容器消失，等待结尾文本距离容器多少距离，才开始从右侧出来）
  3. 头尾相接 ------ 内容超出容器，但是尾部结束时，头部相隔一定距离同时出现在容器；

一、无逢滚动 --- 已知内容宽度不会超过容器宽度 (纯CSS实现)
会增加额外相同的dom元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="scss">
        .wrapper {
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 30%;
            transform: translate(-20%, -50%);

            width: 600px;
            height: 60px;
            overflow: hidden;
            border: 4px solid red;
            border-radius: 5px;
        }

        .marquee-wrapper {
            display: flex;
            align-items: center;
            width: 200%;
            height: 100%;
            transform: translateX(0);
            /*animation: move 6s infinite linear;*/
            animation-delay: 5s;
            /*text-shadow: 1325px 0;*/
        }

        .marquee-text {
            width: 100%;
            font-size: 20px;
            white-space: nowrap;
            /*background-color: red;*/
        }

        .marquee-text:nth-child(2) {
            color: red;
        }
        
        @keyframes move {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-50%);
            }
        }
</style>
</head>
<body>
    <div class="wrapper">
        <div class="marquee-wrapper">
            <div class="marquee-text">
                这是第一行横向滚动的提示文字信息
            </div>
            <div class="marquee-text">
                这是第一行横向滚动的提示文字信息
            </div>
        </div>
    </div>
    </div>
</body>
</html>

二、距离一定的位置进行滚动 --- 内容宽度不定 (JS + CSS实现)
不会增加额外相同的dom元素

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="scss">
        :root {
            --start-position: 0;
        }
        .marquee-wrapper {
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 30%;
            transform: translate(-20%, -50%);
            display: flex;
            align-items: center;
            width: 600px;
            height: 60px;
            overflow: hidden;
            border: 4px solid red;
            border-radius: 5px;
        }

        /*.marquee-wrapper {*/
        /*    display: flex;*/
        /*    align-items: center;*/
        /*    width: auto;*/
        /*    height: 100%;*/
        /*}*/

        .marquee-text {
            width: auto;
            font-size: 20px;
            white-space: nowrap;
        }

        .marquee-text.moveFirst {
            animation: moveFirst linear forwards;
            animation-delay: 3s;
        }

        .marquee-text.moveInfinite {
            animation: moveInfinite linear infinite;
        }


        @keyframes moveFirst {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes moveInfinite {
            0% {
                transform: translateX(var(--start-position));
            }

            100% {
                transform: translateX(-100%);
            }
        }
</style>
</head>
<body>
    <div class="marquee-wrapper">
        <div class="marquee-text">
            这是第一行横向滚动的提示文字信息1这是第一行横向滚动的提示文字信息2。
        </div>
    </div>

    <script>
        const container = document.querySelector('.marquee-wrapper');
        const marqueeText = document.querySelector('.marquee-text');
        const containerWidth = container.offsetWidth
        const marqueeTextWidth = marqueeText.offsetWidth;
        const speed = 100; // 滚动速度，单位 px/s
        const firstAnimationDuration = marqueeTextWidth / speed; // 第一次动画持续时间
        const animationDuration = (marqueeTextWidth + containerWidth) / speed; // 动画持续时间

        if (marqueeTextWidth > containerWidth) {
            marqueeText.classList.add('moveFirst');
            marqueeText.style.animationDuration = `${firstAnimationDuration}s`;

            // 注意⚠️：第一次动画执行不能是infinite，否则不会监听到动画结束
            marqueeText.addEventListener('animationend', () => {
                marqueeText.classList.remove('moveFirst');
                marqueeText.classList.add('moveInfinite');
                // 设置第二次从什么位置开始执行动画
                document.documentElement.style.setProperty('--start-position', containerWidth + 'px');
                // marqueeText.style.setProperty('--start-position', containerWidth + 'px');
                marqueeText.style.animationDuration = `${animationDuration}s`;
            })
        }
    </script>
</body>
</html>

三、头尾相接 ------ 元素与元素间有一定的间距

  1. CSS + JS实现
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="scss">
        :root {
            --width: 0;
        }
        .marquee-wrapper {
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 30%;
            transform: translate(-20%, -50%);
            display: flex;
            align-items: center;
            width: 600px;
            height: 60px;
            overflow: hidden;
            border: 4px solid red;
            border-radius: 5px;
        }

        .marquee-text-wrapper {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .marquee-text {
            width: auto;
            font-size: 20px;
            white-space: nowrap;
            /*color: red;*/
        }

        .marquee-text2 {
            display: none;
            margin-left: 200px;
            /*color: blue;*/
        }

        .marquee-text-wrapper.moveFirst {
            animation: moveFirst linear forwards;
            animation-delay: 3s;
        }

        .marquee-text-wrapper.moveInfinite {
            animation: moveInfinite linear infinite;
        }


        @keyframes moveFirst {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(var(--width));
            }
        }

        @keyframes moveInfinite {
            0% {
                transform: translateX(0);
            }

            100% {
                transform: translateX(var(--width));
            }
        }
</style>
</head>
<body>
    <div class="marquee-wrapper">
        <div class="marquee-text-wrapper">
            <div class="marquee-text">
                这是第一行横向滚动的提示文字信息1这是第一行横向滚动的提示文字信息2。
            </div>
            <div class="marquee-text marquee-text2">
                这是第一行横向滚动的提示文字信息1这是第一行横向滚动的提示文字信息2。
            </div>
        </div>
    </div>

    <script>
        const container = document.querySelector('.marquee-wrapper');
        const marqueeTextWrapper = document.querySelector('.marquee-text-wrapper');
        const marqueeText = document.querySelector('.marquee-text');

        const containerWidth = container.offsetWidth
        const marqueeTextWidth = marqueeText.offsetWidth;
        let marqueeTextWrapperWidth = marqueeTextWidth


        console.log(marqueeTextWidth > containerWidth)

        if (marqueeTextWidth > containerWidth) {
            document.querySelector('.marquee-text2').style.display = 'block';
            // 重新计算滚动内容的宽度
            marqueeTextWrapperWidth = marqueeTextWidth + 200;
            const speed = 100; // 滚动速度，单位 px/s
            const firstAnimationDuration = marqueeTextWrapperWidth / speed; // 第一次动画持续时间

            document.documentElement.style.setProperty('--width', `-${marqueeTextWrapperWidth}px`);
            marqueeTextWrapper.classList.add('moveFirst');
            marqueeTextWrapper.style.animationDuration = `${firstAnimationDuration}s`;

            // 注意⚠️：第一次动画执行不能是infinite，否则不会监听到动画结束
            marqueeTextWrapper.addEventListener('animationend', () => {
                marqueeTextWrapper.classList.remove('moveFirst');
                marqueeTextWrapper.classList.add('moveInfinite');
                marqueeTextWrapper.style.transform = 'translateX(0)';

            })
        }
    </script>
</body>
</html>
  1. JS实现 ------ 使用**window.requestAnimationFrame()** 方法
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style lang="scss">
        :root {
            --width: 0;
        }
        .marquee-wrapper {
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            left: 30%;
            transform: translate(-20%, -50%);
            display: flex;
            align-items: center;
            width: 600px;
            height: 60px;
            overflow: hidden;
            border: 4px solid red;
            border-radius: 5px;
        }

        .marquee-text-wrapper {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .marquee-text {
            width: auto;
            font-size: 20px;
            white-space: nowrap;
        }

        .marquee-text2 {
            display: none;
            margin-left: 200px;
            /*color: red;*/
        }
    </style>
</head>
<body>
<button onclick="handleStart()">开始</button>
<button onclick="handleEnd()">结束</button>

<div class="marquee-wrapper">
    <div class="marquee-text-wrapper">
        <div class="marquee-text">
            这是第一行横向滚动的提示文字信息1这是第一行横向滚动的提示文字信息2。
        </div>
        <div class="marquee-text marquee-text2">
            这是第一行横向滚动的提示文字信息1这是第一行横向滚动的提示文字信息2。
        </div>
    </div>
</div>


    <script>
        const marqueeWrapper = document.querySelector('.marquee-wrapper');
        const marqueeTextWrapper = document.querySelector('.marquee-text-wrapper');
        const marqueeText = document.querySelector('.marquee-text');


        const marqueeWrapperWidth = marqueeWrapper.offsetWidth;
        const marqueeTextWidth = marqueeText.offsetWidth;

        let requestAnimationId = null;
        let startTimeStamp = null;

        // 判断是否溢出
        if (marqueeTextWidth > marqueeWrapperWidth) {
            document.querySelector('.marquee-text2').style.display = 'block';


            // 指定开始位置 指定从容器右侧开始滚动出现
            const startPosition = 600
            // 重新计算滚动内容的宽度 （200: 第二个元素与第一个元素的 marginLeft 距离）
            const offsetWidth = marqueeTextWidth + 200;

            // 创建动画函数
            animationObj = createAnimationFn(marqueeTextWrapper, startPosition, offsetWidth);
            // 开始执行执行动画
            requestAnimationId = animationObj.start();
        } else {
            marqueeTextWrapper.style.transform = `translateX(0)`;
        }

        /*
        * 创建滚动动画
        * el : 要滚动的元素
        * startPosition: 从指定位置开始滚动
        * offsetWidth: 滚动元素的总宽度
        * */
        function createAnimationFn(el, startPosition, offsetWidth) {
            // 60HZ: 1s/60    (1000 / 60) * 0.06 = 16.666666666666668 * 0.06 = 1
            // 这个速度是 1s移动 60px
            const speed = 0.06;
            let cancel = false;

            const func = (timeStamp) => {
                if (cancel) return

                let moveX = 0
                if (startTimeStamp) {
                    moveX = Math.round((timeStamp - startTimeStamp) * speed)
                } else {
                    startTimeStamp = timeStamp
                }
                let x = Math.floor(startPosition - moveX)

                if (x <= -offsetWidth) {
                    startTimeStamp = null;
                    startPosition = 0;
                    x = 0;
                    el.style.transform = `translateX(${x}px)`;
                    if (!cancel) {
                        requestAnimationId = window.requestAnimationFrame(func)
                    }
                    return
                }

                if (el && x > -offsetWidth) {
                    el.style.transform = `translateX(${x}px)`
                    if (!cancel) {
                        requestAnimationId = window.requestAnimationFrame(func)
                    }
                }
            }

            return {
                start: () => {
                    cancel = false
                    return window.requestAnimationFrame(func)
                },
                // 可以再加一些暂停函数等
                end: (requestId) => {
                    cancel = true
                    window.cancelAnimationFrame(requestId)
                },
            }
        }

        function handleStart() {
            if (!animationObj) return
            startTimeStamp = null;
            requestAnimationId = animationObj.start()
        }
        function handleEnd() {
            if (!animationObj) return
            animationObj.end(requestAnimationId)
        }
    </script>
</body>
</html>

window.requestAnimationFrame()

总结：JS 和 CSS实现动画效果的优缺点
相关推荐
Gauss松鼠会4 分钟前
GaussDB Ustore存储引擎解读
java·前端·数据库·gaussdb
敏编程7 分钟前
网页前端开发之HTML入门篇：表格标签 table
前端·html
&活在当下&10 分钟前
js 将文件 url 地址转成 Blob 文件流并下载
前端·javascript·vue.js
shix .13 分钟前
vue3中setup的作用是什么？
前端·javascript·vue.js
随笔写35 分钟前
JavaScript 读取及写入本地文件
开发语言·javascript·ecmascript
AIoT科技物语37 分钟前
免费，基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
编程的幸43 分钟前
前端三件套(HTML + CSS + JS)
前端·css·html
挂科边缘1 小时前
基于YOLOv8 Web的安全帽佩戴识别检测系统的研究和设计，数据集+训练结果+Web源码
前端·人工智能·python·yolo·目标检测·计算机视觉
思茂信息1 小时前
CST汽车天线仿真（双向混合求解）
javascript·人工智能·5g·汽车·ar·软件工程
谢尔登2 小时前
【React】styled-components 基本使用
前端·javascript·css
热门推荐
01Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04制冷毛细管的计算方法介绍05(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08【Java】Ruoyi-Vue-Plus 整合 文件分片上传至 minio、阿里云、七牛云等OSS-【后端篇】09RAG 实践- Ollama+RagFlow 部署本地知识库10MacBook外接键盘修改键位