使用jquery从外部浏览器窗口创建元素动画？

Question

你好，我想让一个元素从浏览器窗口外部滑入视图 - 我的网页的可视div是900px宽，是一个浮动在浏览器窗口中心的框。 （因此，如果浏览器窗口横跨1100px，则我的900px div的每一侧都有100px的空白区域。在1500px宽的浏览器窗口中，每侧有300px的空白区域等。）

我想要的是从侧面滑入一个元素，使其进入浏览器窗口，然后在浏览器窗口的内边缘和我的900px框的外边缘之间的空白区域移动，然后进入框中（要清楚，一个连续的动作）。

如果我只有一个尺寸的浏览器窗口，这很容易做到 - 我只剩下 - = 500px左右的元素动画，但是，如果我的网站的浏览者使用更大的屏幕，元素将从空白区域内开始，而不是在浏览器窗口之外。

当然，我可以通过 - = 1000px做一些像动画左边的动画，但那意味着屏幕较小的人只是等待元素出现，因为它跨越非现存的空间浏览器窗口的现有区域。

所以，我的问题是，是否有一些我可以告诉jquery（或一个插件）来设置移动元素的起点就在浏览器窗口的可见边缘之外，无论浏览器窗口的大小？谢谢！

Answer 1

假设您知道了fly-in节点的宽度，请将其设置为绝对位置，并使左侧为节点宽度的负值。然后，您需要计算您希望节点动画的距离。确定浏览器的当前宽度，将其除以2，然后减去节点中fly的宽度除以2。这将是您希望节点结束的左侧位置。因此，它必须移动的总距离将是添加到结束位置的节点中的飞行的当前左侧位置。从这个数字中激活你的动画。这是一个例子：http://jsfiddle.net/brianflanagan/KtUEL/

Answer 2

听起来像你真正想要的是知道页面宽度。看一下这个页面，它会告诉你哪些浏览器支持哪种页面宽度属性：

http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Answer 3

所以，根据谷歌分析，我最开始做的就是为访问我网站的最大显示器创建足够宽的动画 - 1920px。

在父div的#container的CSS中，我添加了overflow：hidden以防止滚动条在动画运行时出现。

我发生的一件事（对其他人来说可能很明显）是动画的持续时间决定了动画元素在屏幕上移动的速度 - 因此，移动元素需要1100毫秒才能跨越10,000像素或1000像素。这意味着，元素必须移动的距离越大，移动所需的速度就越快。也许有办法说：“在这个地区每小时行驶60英里。”相反，我们说：“在这段时间内越过这个区域，并按照你必须的速度准时到达。”

我将设置一个cookie，以便此动画每个会话只播放一次。要再次运行它，需要清除cookie“welcome”，或者浏览器必须退出并再次启动。在此特定测试页面上，cookie已停用。 http://ianmartinphotography.com/test-site/index-left-right-10.html

Answer 4

我必须在宽度超过1920px的div中包含整个动画 - 我的典型访客的最大屏幕尺寸 - 所以无论如何，动画元素将通过从内边缘滑入而出现。屏幕分辨率为1920px或更小的任何显示器上的浏览器窗口。在我之前的回答中，元素出现在900px div中。现在，我创建了一个1930px宽的div。并且，我添加了溢出：隐藏到正文样式以消除水平滚动条。本周末将在1920px显示器上进行测试......

这是我执行这些更改的最新测试页：http://ianmartinphotography.com/test-site/index.html