使用jquery從外部瀏覽器窗口創建元素的動畫？

Question

你好，我想要一個元素從瀏覽器窗口外部滑入視圖 - 我的網頁的可見div是900px寬，並且是一個浮動在瀏覽器窗口中心的框。 （因此，如果瀏覽器窗口的寬度爲1100px，則我的900px div的每一邊都有100px的空白區域，而在1500px寬的瀏覽器窗口中，每邊都有300px的空白區域等等）。

想要的是讓一個元素從側面滑入，以便它進入瀏覽器窗口，然後在瀏覽器窗口的內邊緣與我的900px框的外邊緣之間的空白區域移動，然後輸入框（要清晰，全部在一個連續的運動中）。

這很容易完成，如果我只有一個瀏覽器窗口大小 - 我只是讓元素動畫留下 - = 500px左右，但是，如果我的網站的查看器使用更大的屏幕，該元素將從空白區域開始，而不是在瀏覽器窗口之外。

當然，我可以做一些類似左邊動畫的東西 - = 1000px，但那意味着屏幕較小的人只是等待元素出現，因爲它跨越了非存在的非空間瀏覽器窗口的存在區域。

所以，我的問題是，有什麼我可以告訴jQuery（或插件）來設置移動元素的起點在瀏覽器窗口的可見邊緣之外，無論瀏覽器窗戶的大小？謝謝！

Answer 1

我不得不在寬於1920px的div中包含整個動畫 - 我的典型訪問者的最大屏幕尺寸 - 因此無論如何，動畫元素都會從內部邊緣滑入任何顯示器的屏幕分辨率爲1920像素或更小的瀏覽器窗口。用我以前的答案，元素出現在900px div內。現在，我創建了一個寬度爲1930px的div。而且，我添加了溢出：隱藏到主體樣式以消除水平滾動條。將測試這個週末1920px監視器上......

這裏是我的最新的測試頁面，實現了這些變化：http://ianmartinphotography.com/test-site/index.html

Answer 2

假設您知道飛入節點的寬度，將其設置爲絕對位置，並使左側爲節點寬度的負值。然後，您需要計算您希望節點進行動畫的距離。確定瀏覽器的當前寬度，將其除以2，然後減去節點中飛行的寬度除以2。這將是您希望節點結束的左邊位置。所以，它必須移動的總距離將是節點中當前的飛行位置添加到結束位置。從這個數字發射出你的動畫。這裏有一個例子：http://jsfiddle.net/brianflanagan/KtUEL/

Answer 3

這聽起來像我真正想要的是知道頁面寬度。看看這個頁面，它會告訴你什麼瀏覽器都支持什麼樣的頁面寬度屬性：

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

Answer 4

所以，我清盤做的只是創建動畫足夠寬爲參觀最大的顯示器根據Google Analytics（分析），我的網站 - 1920px。

在父div的#container的CSS中，我添加了overflow：hidden以防止滾動條在動畫運行時出現。

我發生的一件事（對其他人可能很明顯）是動畫的持續時間決定了動畫元素在屏幕上移動的速度 - 因此，移動元素將需要1100毫秒來跨越10,000px或1000像素。意思是，元件行進的距離越大，需要移動的速度越快。也許有這樣一種說法：「在這個區域每小時行駛60英里。」相反，我們說：「在這段時間內穿越這個區域，並儘可能快地開車，以便按時到達。」

我將設置一個cookie，以便此動畫只在每個會話中播放一次。要再次運行它，需要清除cookie「welcome」，或者瀏覽器必須退出並重新啓動。在這個特定的測試頁面上，cookie被停用。http://ianmartinphotography.com/test-site/index-left-right-10.html