animation - 如何为图形背后的大量文本设置动画？

Question

页面将是白色的，泰姬陵的形状被打孔（即面具），字母在面具下方的一层上从右到左滚动。在此处查看视觉组合。

每行文本应独立滚动，并在到达左边缘时循环。

我看过 SVG、HTML5/canvas 和 jQuery marquee。其中之一特别适合这个吗？

Answer 1

您可能可以使用带有透明图形的分层 DIV 在浏览器中实现此目的。

jQuery 为文本提供了一个很好的选取框行为的实现——您所要做的就是将一个 PNG 分层，其中包含要显示文本的透明区域和要屏蔽它的白色像素。图像将在 z 顺序中位于选取框 DIV 上方。

HTML5 和 SVG 也可能支持这种行为，尽管您需要做更多的工作，因为我不知道预构建的组件会为这两种行为实现选取框行为。由于 SVG 和 HTML5 都不是很广泛可用，因此您最终也会得到一个对较小的受众可见的页面。

Answer 2

基本的 HTML 应该足够了。避免浏览器不兼容也是如此。只需有一个大图像（PNG 或 GIF），其透明遮罩区域绝对位于一堆文本之上。

如果您希望它们无缝循环，您需要将每条线垂直复制足够多次以使它们填充可见区域两次。完成后，只需使用计时器移动每一行。这可能是不使用任何库动画方法并快速滚动自己的最有效的方法，但在每一行上单独使用任何类型的选取框方法也应该有效。