您的位置:

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

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

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

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




  
跑马灯文字1
跑马灯文字2

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

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

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



<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.marquee.min.js"></script>


  
跑马灯文字1
跑马灯文字2
<script> $('.marquee-ct').marquee({ duration: 12000, gap: 50, delayBeforeStart: 0, direction: 'left', duplicated: true }); </script>

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

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

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



<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="jquery.marquee.min.js"></script>


  

  
跑马灯文字1
跑马灯文字2
<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 生成了闪烁的星星效果。