如何为图形后面的大量文本添加动画效果？
该页面将是白色的，带有泰姬陵的形状（即面具），字母在面具下方的一层上从右向左滚动。 在此处查看视觉效果。
每行文本应独立滚动，并在到达目标位置时循环播放左边缘。
我研究过 SVG、HTML5/canvas 和 jQuery marquee。其中之一特别适合这个吗？
The page would be white with the shape of the Taj Majal punched out (i.e., a mask) with the letters scrolling from right to left on a layer below the mask. See a visual comp here.
Each line of text should scroll independently, and loop around when it reaches the left edge.
I've looked at SVG, HTML5/canvas, and jQuery marquee. Is one of these especially suited for this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可能可以使用带有透明图形的分层 DIV 在浏览器中实现此目的。
jQuery 提供了一个很好的 实现文本选取框 行为 - 您所要做的就是将 PNG 分层，其中包含要显示文本的透明区域和要遮盖文本的白色像素。图像将位于 z 顺序中选取框 DIV 上方。
HTML5 和 SVG 也可能支持这种行为，尽管这需要您做更多的工作，因为我不知道有哪些预构建组件可以实现这两种行为的选取框行为。由于 SVG 和 HTML5 都不是很广泛可用，因此您最终还会得到一个对较小受众可见的页面。
You could probably use layered DIVs with transparent graphics to achieve this in a browser.
jQuery provides a good implementation of marquee behavior for text - all you would have to do is layer a PNG with a transparent region where you want to display text and white pixels where you want to mask it out. The image would be position above the marquee DIV in the z-order.
Both HTML5 and SVG could likely also support this behavior, although it would take more work on your part since I'm not aware of prebuilt components that implement marquee behavior for either. You will also end up with a page that will be visible to a smaller audience since neither SVG nor HTML5 are very widely available.
基本的 HTML 应该足够了。还要避免浏览器不兼容。只需有一张大图像（PNG 或 GIF），其中透明遮罩区域绝对位于一堆文本行上方
。
如果您希望它们无缝循环，则需要将每条线垂直复制足够多次，以使它们填充可见区域两次。完成后，只需用计时器移动每行即可。这可能是最有效的方法，无需使用任何库动画方法，只需快速滚动自己的动画方法，但在每行上单独使用任何类型的选取框方法也应该可行。
Basic HTML should be quite enough for this. Avoids are browser incompatibilities as well. Just have a big image (PNG or GIF) with a transparent mask area absolutely positioned over a bunch of lines of text
.
You'll need to duplicate each line vertically enough many times to make them fill the visible area twice if you want them to loop around seamlessly. After you've done that, just move the each line with a timer. This might be the most efficient to do without using any library animation methods and just rolling your own quickly, but using any kind of marquee method on each line separately should also work.