如何制作带动效的跑马灯文字

发布时间：2023-05-12

跑马灯文字是一种特殊的排版方式，用于展示滚动的信息。如果加入动效，可以更加吸引人的眼球，常见于网站首页或广告展示等场景。本文将从以下几个方面详细介绍如何制作带动效的跑马灯文字。

一、使用CSS3动画制作跑马灯效果

利用CSS3的 animation 属性可以很方便的实现动画效果，结合使用 JavaScript 就可以做到跑马灯的效果。下面是一个示例：

<style>
.marquee-ct {
    width: 500px;
    height: 60px;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
}
.marquee-item {
    position: absolute;
    top: 0;
    height: 100%;
    animation: marquee 12s linear infinite;
}
.marquee-item:nth-of-type(1) {
    animation-delay: 0s;
    left: 0;
}
.marquee-item:nth-of-type(2) {
    animation-delay: 6s;
    left: 500px;
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-500px);
    }
}
</style>
<div class="marquee-ct">
  <div class="marquee-item">跑马灯文字1</div>
  <div class="marquee-item">跑马灯文字2</div>
</div>

在上面的代码中，通过设置 marquee-ct 元素的宽度和高度，并将其 overflow 属性设置为 hidden，将 marquee-item 元素绝对定位在其中，并使用 animation 属性和 keyframes 定义动画效果。

二、使用jQuery插件制作跑马灯效果

jQuery 是一个非常实用的 JavaScript 库，可以很方便的优化网页制作效果。利用 jQuery 的 marquee 插件就可以实现轻松的跑马灯效果。下面是一个示例：

<style>
.marquee-ct {
    width: 500px;
    height: 60px;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
}
.marquee-item {
    position: absolute;
    top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.marquee.min.js"></script>
<div class="marquee-ct">
  <div class="marquee-item">跑马灯文字1</div>
  <div class="marquee-item">跑马灯文字2</div>
</div>
<script>
$('.marquee-ct').marquee({
    duration: 12000,
    gap: 50,
    delayBeforeStart: 0,
    direction: 'left',
    duplicated: true
});
</script>

在上面的代码中，利用 jQuery 引入 marquee 插件，并在调用时设置了一些参数，包括动画的间隔时间、滚动间隔时间、滚动方向、是否允许复制等。

三、结合CSS3、jQuery和HTML5 Canvas制作跑马灯效果

使用 HTML5 的 canvas 标签，在跑马灯的基础上添加动态图形效果。下面是一个示例：

<style>
canvas {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.marquee-ct {
    width: 500px;
    height: 60px;
    border: 1px solid #ccc;
    overflow: hidden;
    position: relative;
}
.marquee-item {
    position: absolute;
    top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.marquee.min.js"></script>
<canvas id="canvas"></canvas>
<div class="marquee-ct">
  <div class="marquee-item">跑马灯文字1</div>
  <div class="marquee-item">跑马灯文字2</div>
</div>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var hue = 217;
var stars = [];
var count = 0;
var maxStars = 1300; // 星星数量
var canvas2 = document.createElement('canvas');
canvas2.width = 100;
canvas2.height = 100;
var ctx2 = canvas2.getContext('2d');
var half = canvas2.width / 2;
var gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
function random(min, max) {
    if (arguments.length < 2) {
        max = min;
        min = 0;
    }
    if (min > max) {
        var hold = max;
        max = min;
        min = hold;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
    var max = Math.max(x, y);
    var diameter = Math.round(Math.sqrt(max * max + max * max));
    return diameter / 2;
}
var Star = function() {
    this.orbitRadius = random(maxOrbit(w, h));
    this.radius = random(60, this.orbitRadius) / 12;
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, 25);
    this.speed = random(this.orbitRadius) / 2000000; // 星星飞行速度
    this.alpha = random(2, 10) / 10;
    count++;
    stars[count] = this;
};
Star.prototype.draw = function() {
    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX;
    var y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY;
    var twinkle = random(10);
    if (twinkle === 1 && this.alpha > 0) {
        this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
        this.alpha += 0.05;
    }
    ctx.globalAlpha = this.alpha;
    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.timePassed += this.speed;
};
for (var i = 0; i < maxStars; i++) {
    new Star();
}
function animation() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.5; // 尾巴
    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
    ctx.fillRect(0, 0, w, h);
    ctx.globalCompositeOperation = 'lighter'; // 星星
    for (var i = 1, l = stars.length; i < l; i++) {
        stars[i].draw();
    }
    window.requestAnimationFrame(animation);
}
animation();
$('.marquee-ct').marquee({
    duration: 12000,
    gap: 50,
    delayBeforeStart: 0,
    direction: 'left',
    duplicated: true
});
</script>

在上面的代码中，通过添加 canvas 标签，利用 JavaScript 生成了闪烁的星星效果。

推荐文章