缩放过渡效果

Question

一些网站（例如http://scaleofuniverse.com/）具有可缩放的界面，可让您“缩放”项目以显示其中包含的“较小”项目。我一直在Flash中看到这个，但我想知道如何使用JavaScript和CSS。有没有支持此功能的开源库？

另外，我看过impress.js，它有一些非常酷的功能，但我不确定我是否能够使用这个库实现所需的效果。这只是使用正确的CSS样式的问题吗？

Answer 1

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

Answer 2

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

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

Answer 3

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