試圖獲得JavaScript動畫的懸念

我是新來的，也是JavaScript的新手。試圖獲得JavaScript動畫的懸念

基本上我試圖實現的是從頁腳到頁面中心的圖像上升，我已經研究出如何使用CSS來實現。但是我希望它能夠在頁面加載時自動升起。

如果任何人都可以指出我正確的方向或給我一些例子等，我會非常感激。

由於提前，

喬

2013-01-17 user1987330

有至少兩個偉大的項目，你可以從中學習：[** animate.css **]（https://github.com/daneden/animate.css）和[** jQuery.transit **] （https://github.com/rstacruz/jquery.transit）。他們的源代碼應該給你一些幫助。 –

所以，你想之前執行的動畫/在加載網頁？大多數現代瀏覽器在動畫之前加載網站。

雖然有一個替代方案。您可以將大部分內容留在頁面之外，當然除了動畫之外。當網站被加載時，動畫開始，你可以使用AJAX來獲取你的內容。

這將意味着，當您的動畫運行時，內容被加載。

我現在正在創建一個演示...堅持！

這裏的演示：http://jsfiddle.net/gWhtQ/

我用window.addEventListener('load', init, false);等待JavaScript的運行，直到頁面加載。

加載後，會創建一個XMLHttpRequest對象，在您的頁面正常運行時會獲取其他文件。

加載內容後，我使用document.getElementById('content').innerHTML = xmlhttp.responseText;添加響應。

不提及內容。我只使用了一個隨機的CSS文件。

來源

2013-01-17 14:01:29

哇！非常感謝蒂姆，這正是我所期待的。祝我好運，再次感謝！ – user1987330

非常歡迎您！在堆棧溢出中，如果任何人有相同的問題，您可以接受答案以向人們展示正確的答案。請點擊答案左側的大「V」。 –

如果您剛剛開始使用Javascript，那麼使用類似jQuery這樣的庫開始動畫可能會容易得多。

jQuery將允許您專注於您正在嘗試做的事情，而不用擔心瀏覽器差異，準備好的事件等。另外，如果您對jQuery如何執行動畫更感興趣，可以查看code on GitHub 。

來源

2013-01-17 14:08:09 RayViljoen

謝謝你，很棒的資源！ – user1987330

我建議你看看jQuery和Addy Osmani's post。要在加載頁面時執行動畫，您需要將圖像放在HTML正文的頂部，以便瀏覽器在頁面的其餘部分停止並首先加載它。然後，在腳本中，您可以測試該元素是否存在於DOM中，然後在該時刻開始動畫。但是，這確實會影響性能。我建議在頁面加載完成後使用jQuery輕鬆測試動畫。通過這種方式，圖像可以放置在html正文的任何位置，並且您的腳本可以放在最後以提高加載時間。 Paul Irish在做動畫時也有good post。

來源

2013-01-17 14:09:56

試圖獲得JavaScript動畫的懸念

回答

相關問題