像wunderlist.com上的动画弹出窗口

Question

我遇到了wunderlist.com网站，只是爱上了他们对标题“了解更多关于奇妙清单”下方图片的缩放式弹出窗口。 我想在我的网站上实现类似的功能。

有人可以告诉我这是怎么做到的吗？我试图逆向工程，但没有运气:) 我不希望有完整的代码，但可能有一些关于如何使用CSS / jQuery实现这一点的指南。

或许你知道我可以使用的一些jQuery插件吗？

Answer 1

尝试查看两个主要方面： 打开您选择的检查器工具，看看body.login .feature会发生什么 ...更具体地说，看看它的transform: scale和opacity值会发生什么：悬停。

提示：过渡主要是在他们身上。

仍然在检查器中，将比例更改为（1），将不透明度更改为1.如何从一个状态顺利地转换到另一个状态由transition属性决定。

这并不是要告诉你如何实现它，而是为了让你继续前进：）

Answer 2

他们正在使用所有CSS。真的很简单..我会为你编写一个完整的js小提琴示例，但我没有时间，所以我将列出你需要的不同元素以及它们如何相互作用。

1. 首先，大图像只是一个带有背景图像的div 尺寸。
2. 圆形图像本身是从一个包含一个点中所有圆的大图像生成的，这称为精灵。圆圈只是div的背景图像和背景定位，以便从精灵图像中将正确的圆圈定位在框内。
3. 文本框本身也是div，文本的标准H2和P标记。
4. 为了实现正确的布局，一切都是绝对定位的。
5. 小圆圈是div，其:hover个状态绝对位于各自的目标区域。
6. :hover上的动画是通过使用css3过渡和css3变换实现的。

这应该让你开始。

如果您有疑问，请发表评论。

有一些时间玩得开心：http://khill.mhostiuckproductions.com/siteLSSBoilerPlate/fun-experiment-mh/

Answer 3

实际上并不难。奇妙清单团队甚至让它变得更容易。它们有一个大的精灵图像，缩放的图像被剪裁，准备好圆角，边框和阴影。你可以在这里看到它：https://wunderlist2.s3.amazonaws.com/179510ff7c929bfcc6e9819f3c2539baca5d3325/images/welcome-screen.png

你做的是在鼠标悬停时你显示一个半透明的黑色背景（可以是位置：固定全宽和高度）。然后你创建一个以sprite作为背景图像的元素（更好的是，在你的css中准备一个类并将它附加到你新创建的元素）。将位置设置为悬停元素的位置。

当添加到dom中时，会为元素的变换比例设置动画（从缩放（.24）开始）。

Answer 4

自从你尝试逆向工程以来。我会尝试引导你走这条路。

只有一个ID为叠加的div，它会更改它的位置＆amp;内容，悬停在任何具有功能的div上。从他们的app js进一步发展，它没有缩小。

在这种情况下，弹出窗口的内容是移动到不同位置的image。