《罗刹海市》歌词滚动效果的巧妙实现

前端

2023-10-04 22:00:31

在动效设计的世界里，滚动歌词往往扮演着点睛之笔，赋予音乐以视觉魅力。而《罗刹海市》的歌词滚动效果更是其中翘楚，其独特的表现形式让人过目难忘。本文将深入探究这一动效的实现思路和技术细节，带领你领略精妙的动画设计艺术。

解构动效元素

《罗刹海市》歌词滚动效果主要由以下元素构成：

歌词容器： 一个宽度和高度固定的容器，容纳滚动歌词。
歌词子容器： 一个宽度大于父容器的容器，包含歌词文本。
滚动轨道： 一个随着歌词子容器移动的动画轨迹。
歌词文本： 一行或多行歌词，作为歌词子容器的内容。

实现思路

实现该效果的关键在于使用CSS动画和JavaScript同步歌词子容器和滚动轨迹的移动。具体步骤如下：

创建歌词容器和子容器： 使用HTML创建两个嵌套容器，为歌词提供一个固定的框架。
添加滚动轨道： 为歌词子容器添加一个动画轨迹，使其在容器内左右移动。
使用CSS动画： 为歌词子容器设置一个循环动画，根据滚动轨迹进行移动。
同步歌词文本： 使用JavaScript监听歌词子容器的运动，并同步更新歌词文本的位置。
完善效果： 调整动画速度、歌词间距等细节，打造流畅自然的滚动效果。

示例代码

以下是一个实现《罗刹海市》歌词滚动效果的示例代码：

<div id="lyrics-container">
  <div id="lyrics-track">
    <p id="lyrics-text">...</p>
  </div>
</div>

#lyrics-container {
  width: 500px;
  height: 100px;
  overflow: hidden;
}

#lyrics-track {
  width: 1000px;
  animation: lyrics-animation 10s linear infinite;
}

@keyframes lyrics-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-500px);
  }
}

#lyrics-text {
  width: 500px;
}

const lyricsContainer = document.getElementById('lyrics-container');
const lyricsTrack = document.getElementById('lyrics-track');
const lyricsText = document.getElementById('lyrics-text');

lyricsTrack.addEventListener('animationiteration', () => {
  lyricsText.style.left = lyricsContainer.offsetWidth + 'px';
});