网页上不稳定的动画幻灯片背景
我正在制作一个带有动画背景的网页。我正在使用 MooTools 交叉淡入淡出一系列大小合适的图像(例如 1100 像素 x 750 像素)。
我认为,由于浏览器必须对这些图像进行大量渲染工作,因此当您使页面全屏时,交叉淡入淡出动画将变得不稳定。
在寻找克服这个问题的方法时,我已经计划用我能找到的最高效的 JavaScript 重写幻灯片。
对于如何让动画背景在大浏览器窗口尺寸下平稳运行,有人有任何其他想法吗?
I'm working on a web page with an animated background. I'm using MooTools to crossfade a series of images that are of a decent size (like 1100px x 750px).
I think since the browser is having to do so much rendering work crossfading these images, when you make the page fullscreen, the crossfade animation will become choppy.
In looking for ways to overcome this, I'm already planning on rewriting the slideshow in the most efficient JavaScript I can muster.
Does anyone have any other ideas on how to have the animated background run smoothly at large browser window sizes?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
交叉淡入淡出效果非常昂贵,并且在该分辨率下每秒帧数非常低。我会尝试上/下/左/右滑动或擦除效果,而不是交叉淡入淡出。我是 jQuery 工具可滚动插件 的忠实粉丝。
Crossfade effect is expensive and you'll get very low frames per second at that resolution. Instead of a crossfade I'd try a slide up/down/left/right or wipe effect. I'm a big fan of the jQuery tools Scrollable plugin.
正如您自己所说,这可能是一个渲染问题,而不是真正的 JavaScript 速度问题,特别是因为全屏和非全屏之间存在性能差异。
我怀疑优化你的js会有任何实际效果。
AS you said yourself, this is probably a rendering issue, and not really an issue with the speed of your javascript, especially since there is a performance difference between fullscreen and non-fuulscreen.
I doubt optimizing your js will have any real effect.