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

Question

页面将是白色的，其中Taj Majal的形状被打出（即，一个面具），字母在面具下方的层上从右向左滚动。 See a visual comp here.

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

我看过SVG，HTML5 / canvas和jQuery选框。其中一个特别适合这个吗？

Answer 1

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

jQuery为文本提供了良好的implementation of marquee行为 - 您所要做的就是将一个PNG与一个透明区域分层，在该区域中您要显示文本和白色像素，以便将其屏蔽掉。图像将按z顺序位于选框DIV上方。

HTML5和SVG都可能也支持这种行为，尽管你需要做更多的工作，因为我不知道实现其中任何一个的marquee行为的预构建组件。由于SVG和HTML5都无法广泛使用，因此您最终会看到一个较小的受众群体可以看到的页面。

Answer 2

基本HTML应该足够了。 Avoids也是浏览器不兼容的问题。只需要一个大图像（PNG或GIF），透明的遮罩区域绝对位于一堆文本行上

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