創建運動是為觀眾提供有趣且互動的體驗的好方法。隨著現代網站提供更多的交互性，人們越來越期望簡單的網站將提供一定程度的動畫 /運動來吸引訪客。
>今天，我將概述您可以適應您的Web項目的技術 - 滾動到預定義的區域時觸發動畫。這些動畫將使用CSS變換和CSS過渡創建。我們還將使用jQuery檢測何時可見元素並添加/刪除適當的類。
對於那些想看到此類示例的人，您可以直接跳到演示。鑰匙要點
>每種方法都有利弊。 jQuery（讀取JavaScript）允許您動畫CSS不使用的內容（例如滾動位置或元素的屬性），而CSS動畫對於喜歡將所有動畫和演示邏輯的開發人員非常有吸引力層。
>我將通過CSS使用轉換，但是根據您的情況，總有變量需要考慮。我會考慮以下因素：
由於我們的解決方案將基於轉換，因此我們的瀏覽器兼容性將僅限於支持2D變換或3D變換的瀏覽器。
>所有現代瀏覽器都將支持3D變換，幾個舊的舊瀏覽器（例如Internet Explorer 9和Opera 11.5）將支持2D變換。桌面和移動瀏覽器的總體支持都是全面的。
如果您使用庫的1.x版本，則速度
示例將對較舊的瀏覽器使用3D變換，並使用2D秋季。我們想強制硬件加速度以速度，因此必須進行3D轉換（我們將使用Translate3D以及其他導致GPU加速渲染的功能）。
> jQuery的動畫方法比GPU輔助轉換要慢得多，因此我們將使用jQuery進行活動處理 /計算，而不是為了我們的動畫本身（因為我們希望它們盡可能流暢）。
旁注我們都知道jQuery！ == javascript，對嗎？好吧，事實證明，將香草JS用於動畫可能並不是一個不好的想法。儘管這超出了本教程的範圍，但對於那些有興趣了解更多信息的人來說，這是有關該主題的兩篇出色文章：
css vs. JS動畫：哪個更快？
>>該技術的總體要點是瀏覽我們標記為動畫的所有元素，然後確定它們當前是否在視口內。讓我們介紹如何實現這一目標：
滾動是一項昂貴的業務。如果您將事件偵聽器附加到滾動事件，則每當用戶滾動頁面時，它都會發射很多次。由於每當用戶滾動時，我們將調用我們的維度 /計算功能，因此最好將選擇器返回的元素存儲在變量中。這被稱為選擇器緩存，並避免我們一遍又一遍地查詢DOM。
>請注意變量前面的美元符號。這是指出他們容納jQuery對像或對象的收集的慣例。
>
接下來，我們創建了聆聽滾動事件的事件處理程序。當我們滾動頁面時，這將發射。我們將其引用到我們的check_if_in_view函數（我們將在一分鐘內獲取）。每次滾動事件啟動時，都將執行此功能。
>
<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>由於我們正在計算高度和寬度，因此我們需要考慮方向變化以及一般調整大小。
>我們可以更新活動處理程序，以聆聽滾動和調整大小的事件。這將使我們的檢測功能在調整大小或更改方向時能夠起作用。
$<span>window.on('scroll', check_if_in_view);</span>>此外，我們還使用jQuery觸發方法在DOM準備就緒後立即觸發滾動事件。我們這樣做是為了使視圖中的任何要動畫的元素都在視圖中被檢測到視圖，並且應用動畫就好像我們已經滾動一樣。
$<span>window.on('scroll resize', check_if_in_view);</span>>此示例的實際檢測部分來自以下腳本。
$<span>window.trigger('scroll');</span>讓我們分解這裡發生的事情。
> Check_IF_IF_IN_VIEW功能最初在DOM準備就緒時，然後每次調整或滾動時。
>我們獲得了窗口的當前高度，以及其頂部和底部位置，因此我們知道我們正在尋找的區域。
>我們經歷並查找所有將在其中進行動畫的項目（保存在$ Animation_Elements變量中）。對於這些元素，我們收集其高度及其頂部和底部位置（因此我們知道它在頁面上的位置）。
>我們比較每個項目，以查看其底部位置是否大於窗口的頂部位置，但該項目的頂部位置也小於窗口的底部位置。
這是一個視覺示例
的細分很重要
height（）和width（）
為了進行完整故障，請訪問高度或寬度文檔。
此外，您還可以通過將真實值傳遞給函數來指定以包括其邊緣。 要進行完整的故障，請訪問外部或外部寬水文檔
下面列出的是一系列動畫，使用我們討論過的基礎知識。這些示例將尋找動畫元素，並在視圖中應用活動元素。 >從左 對於我們的第一個示例，我們將在進入視口時從左側滑動。 我們通過在元素x軸上使用Translate3D來實現這一目標。
>
>現在您可以檢測到何時在視圖中進行元素，您可以鏈接其他轉換或效果來創建交互式接口。例如，當元素進入視口（以及其轉換之後）時，您可以轉換其他元素，例如標題中的褪色，圖像中的縮放等。 >您已經在項目中使用了這些效果嗎？還是您認為動畫被過度使用並損害用戶體驗？無論哪種方式，我都希望在評論中收到您的來信。 >>將您的CSS技能帶入我們的CSS Master，Tiffany B. Brown的第二版，涵蓋CSS動畫，過渡，轉型等。
經常詢問的問題（常見問題解答）關於使用jQuery和CSS3 >我如何開始使用jQuery和css3？創建基於捲軸的動畫，您首先需要在HTML文件中包含jQuery庫。您可以從jQuery網站下載它，也可以直接從內容交付網絡（CDN）中包含它。包含jQuery後，您可以在單獨的.js文件或HTML文件中的腳本標籤中開始編寫JavaScript代碼。然後，您可以使用jQuery的.aimate（）方法來創建動畫。對於CSS3動畫，您可以使用KeyFrames和Animation屬性。 >如何使我的基於捲軸的動畫更順暢？ > 如何確保我的基於滾動的動畫在不同的瀏覽器上工作？ >inninheight（）和innerwidth（）函數返回元素的高度或寬度，包括其附加填充（但是它不包括邊界和邊緣）
>
>滾動動畫示例元素都應具有標準類，例如動畫元素，將其位置設置為相對或絕對。此外，如果要創建多個效果，則可以創建相應的類，例如滑左左，可以將其與視圖類結合使用。然後，您應該將轉換應用於Animation-Element.slide-Left.inview
等類
>請參閱滾動上的筆CSS動畫 - 從sitepoint（@sitepoint）從codepen上滑入。
>
在此示例中，我們使用它來顯示員工配置文件，但是您可以重新利用相同的功能以在所需的任何元素中滑動。
>請參閱滾動上的筆CSS動畫 - codepen上的sitepoint（@sitepoint）從底部淡出。
從這裡到哪裡？ >使用jQuery和css3？
創建基於捲軸的動畫的基本要求是什麼，可以使用JQuery和CSS3創建基於捲軸的動畫，您需要對HTML，CSS和JavaScript的基本了解。您還需要在項目中包含jQuery庫。 JQuery是一個快速，小且功能豐富的JavaScript庫，簡化了HTML文檔遍歷，事件處理和動畫。另一方面，CSS3是級聯樣式語言的最新演變，旨在擴展CSS2.1。它帶來了許多期待已久的新穎性，例如圓角，陰影，漸變，過渡或動畫。
>我可以控制jQuery中基於滾動的動畫的速度嗎？在jQuery。 .aimate（）方法接受持續時間參數，該參數確定動畫將運行多長時間。持續時間以毫秒為單位；較高的值表示動畫速度較慢，而不是更快的動畫。
使您的基於捲軸的動畫更加順暢，您可以使用'siele' -out'CSS3過渡 - 定時功能屬性的值。該值指定動畫應緩慢啟動，在中間加速，然後在末尾放慢速度。這可以給您的動畫帶來更自然和平滑的感覺。
當用戶滾動到頁面上的某個點時，我如何觸發動畫？ 您可以使用jquery's .scroll（）方法觸發事件，當用戶在用戶滾動到某個點上的某個點時頁。在.scroll（）方法中，您可以使用.scrolltop（）方法來獲取滾動條的當前垂直位置。然後，您可以使用if語句檢查滾動位置是否超出了一定點，如果是的，則觸發動畫。 >
>如何停止或暫停JQuery中的基於滾動的動畫？您可以使用.stop（）方法在jQuery中停止基於捲軸的動畫。此方法可以在所選元素上停止當前運行的動畫。要暫停動畫，這要復雜得多，因為jQuery並不是本地支持動畫暫停。但是，您可以通過使用插件或手動跟踪動畫狀態和進度來實現這一目標。 我可以使用jQuery一次動畫多個CSS屬性嗎？ >是的，您可以使用jQuery的.aimate（）方法一次對多個CSS屬性進行動畫動畫。您只需要在.aimimate（）方法的屬性對象參數中包含要動畫為鍵值對的屬性。
以上是使用jQuery和CSS3創建基於捲軸的動畫3的詳細內容。更多資訊請關注PHP中文網其他相關文章！
