梅利皮克斯马斯

Merry Pixmas 屏幕截图

摘要

Merry Pixmas:通过 3D CSS 转换为圣诞节增添乐趣。

我们喜欢什么?

以圣诞为主题的精彩演示,在桌面设备和移动设备上都能获得理想的效果。甚至还提供全新的主题颜色支持,以及用于实现全屏启动主屏幕体验的网页清单。

专业提示:摇晃手机,即可下雪!

可能的改进

尽管我意识到这是一个演示,但为资源和非阻塞渲染的 JavaScript 设置了一些指定的缓存标头,本可以显著缩短感知加载时间。

Jim Savage 访谈

为什么是网页?

东京,我们一直以来都是响应式和移动网络的倡导者,而不是为了打造原生服务。Pixmas 是我们在项目间歇的休息时间内 对 HTML5 和 CSS3 进行实验的结果。我们一直在不断尝试新事物,来使我们的知识保持最新;因此,对于我们的前端开发者团队来说,任何研究自然都应该侧重于 Web,而不是原生平台。

随着浏览器日益成熟,我们发现越来越多的类似原生的功能;过去只能通过原生开发才能使用的功能,例如地理定位、相机访问、本地数据库存储等,这些功能都有助于为用户提供类似于原生的整体体验,但同时还能享受跨平台和快速迭代开发的优势。当然,原生开发仍然有其优势,在处理新项目时,您需要考虑 Web 和原生选项。这听起来似乎显而易见,但对我们的客户而言,最重要的是推荐适合相应工作的平台,而不是将每个项目都拖入我们的编码流程。

在开发过程中,哪些方面做得不错?

我觉得 Pixmas 的重点是关于 3D 转换以及我们能将 CSS 推向多远,因此像素化的插图风格在浏览器中非常好用,正如任何前端开发者都会告诉您的,浏览器的自然行为是适合方形的!因此,围绕基于正方形的问题确定整体样式和 3D 数学效果非常好与任何其他原始形状相比,使用 3D 转换和 HTML 构建立方体都容易得多。不过,互动和动画需要我们稍作试验才能顺利实现。

最让我们惊讶的是,3D 在移动平台上的流畅性和浏览器性能,尤其是在不太知名的 Android 设备上。

如果您可以使用任何 API 来改进您的应用,您会选择哪个 API?

如果我们要重新编写 Pixmas,可能会使用基于 WebGL 的 API。 虽然通过 CSS 以 3D 形式操控 HTML DOM 元素很有趣,但基于网络的 3D 真正强大之处在于 WebGL 等专用硬件加速技术。CSS 3D 适用于基本的网页效果和过渡,但在对 Pixmas 进行编码时,我们肯定遇到了浏览器性能的限制。

Google 在 Chrome 实验中提供了一些优秀的 WebGL 项目。