放大过渡效果答案

【问题标题】：Zoom-through Transition Effect放大过渡效果
【发布时间】：2012-03-16 10:25:19
【问题描述】：

许多网站，例如http://scaleofuniverse.com/，都有可缩放的界面，允许您“放大”项目以显示其中包含的“较小”项目。我一直看到这是在 Flash 中完成的，但我想知道如何使用 JavaScript 和 CSS 来制作它。是否有任何支持此功能的开源库？

另外，我查看了 impress.js，它有一些非常酷的特性，但我不确定使用这个库是否能够达到预期的效果。只是使用正确的 CSS 样式的问题吗？

【问题讨论】：

【解决方案1】：

这个过程非常复杂，但它是可行的，这里有一篇关于如何提出它的好文章，Create a zoomable user interface with CSS3，还有一个 jQuery 插件，可以提供你正在寻找的关闭效果，Zoomooz。

【讨论】：

【解决方案2】：

如果你的界面元素是一个 HTML 元素，你可以扩展元素直到它填满屏幕，同时将不透明度降低到 0。这种技术将依赖于界面元素中使用的任何图像是可伸缩的（可能使用background-size: cover）。

您可以使用 css 过渡或 javascript 来实现效果。

【讨论】：

【解决方案3】：

我最终使用了zoom.js 的精简版本，它提供了放大任何DOM 元素的能力。它与 Zoomooz 类似，但不那么臃肿，让我可以隔离实现效果所需的几行代码，而无需加载外部库。

【讨论】：