使用jQuery和CSS3創建基於捲軸的動畫3

創建運動是為觀眾提供有趣且互動的體驗的好方法。隨著現代網站提供更多的交互性，人們越來越期望簡單的網站將提供一定程度的動畫 /運動來吸引訪客。

>今天，我將概述您可以適應您的Web項目的技術 - 滾動到預定義的區域時觸發動畫。這些動畫將使用CSS變換和CSS過渡創建。我們還將使用jQuery檢測何時可見元素並添加/刪除適當的類。

對於那些想看到此類示例的人，您可以直接跳到演示。

鑰匙要點

可以使用JQuery和CSS3創建基於捲軸的動畫，為觀眾提供交互式體驗。當用戶滾動進入預定義的區域時，這些動畫會觸發，從而使其更具吸引力和視覺吸引力。 該技術涉及使用CSS變換和CSS轉換，用於檢測何時可見元素並添加/刪除適當的類。這種方法的考慮包括瀏覽器的兼容性和速度，現代瀏覽器支持2D和3D轉換以進行平滑動畫。

該過程涉及檢測視圖中的動畫元素，掛接到滾動事件，處理調整大小以及計算元素的高度和寬度。當元素位於視口內時，可以觸發動畫，從而允許為交互式接口鏈接其他轉換或效果。
• >
滾動動畫的示例包括從左側的元素滑動，從底部向上褪色的元素以及多步彈力動畫。這些技術可以適用於各種網絡項目，例如顯示員工資料或課程信息。
為什麼在滾動上觸發動畫？
• >
>我們要在滾動上觸發動畫的主要原因是，當用戶滾動元素視圖時，它們就可以激活它們。
>我們可能希望淡入元素，或提供有趣的轉換，只有在用戶可以實際查看它們時，這些元素才有意義。

使用CSS或用jQuery進行動畫？

>每種方法都有利弊。 jQuery（讀取JavaScript）允許您動畫CSS不使用的內容（例如滾動位置或元素的屬性），而CSS動畫對於喜歡將所有動畫和演示邏輯的開發人員非常有吸引力層。

>我將通過CSS使用轉換，但是根據您的情況，總有變量需要考慮。我會考慮以下因素：

>瀏覽器兼容性

由於我們的解決方案將基於轉換，因此我們的瀏覽器兼容性將僅限於支持2D變換或3D變換的瀏覽器。

>所有現代瀏覽器都將支持3D變換，幾個舊的舊瀏覽器（例如Internet Explorer 9和Opera 11.5）將支持2D變換。桌面和移動瀏覽器的總體支持都是全面的。

如果您使用庫的1.x版本，則 jQuery的動畫方法可在任何（SANE）瀏覽器中起作用。 jQuery 2.X刪除了對IE8及以下的支持，因此僅在您不需要支持舊瀏覽器時才使用此功能（Lucky You！）。

速度

>我們想要快速，流暢的動畫，尤其是在移動設備方面。因此，它總是最好在可能的情況下使用過渡和轉換。

示例將對較舊的瀏覽器使用3D變換，並使用2D秋季。我們想強制硬件加速度以速度，因此必須進行3D轉換（我們將使用Translate3D以及其他導致GPU加速渲染的功能）。

> jQuery的動畫方法比GPU輔助轉換要慢得多，因此我們將使用jQuery進行活動處理 /計算，而不是為了我們的動畫本身（因為我們希望它們盡可能流暢）。

旁注

我們都知道jQuery！ == javascript，對嗎？好吧，事實證明，將香草JS用於動畫可能並不是一個不好的想法。儘管這超出了本教程的範圍，但對於那些有興趣了解更多信息的人來說，這是有關該主題的兩篇出色文章：

>

css vs. JS動畫：哪個更快？

>

神話破壞：CSS動畫與JavaScript
• >
• 現在回到節目…

檢測視圖中的動畫元素

>該技術的總體要點是瀏覽我們標記為動畫的所有元素，然後確定它們當前是否在視口內。讓我們介紹如何實現這一目標：

選擇器緩存

滾動是一項昂貴的業務。如果您將事件偵聽器附加到滾動事件，則每當用戶滾動頁面時，它都會發射很多次。由於每當用戶滾動時，我們將調用我們的維度 /計算功能，因此最好將選擇器返回的元素存儲在變量中。這被稱為選擇器緩存，並避免我們一遍又一遍地查詢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變量中）。對於這些元素，我們收集其高度及其頂部和底部位置（因此我們知道它在頁面上的位置）。

>我們比較每個項目，以查看其底部位置是否大於窗口的頂部位置，但該項目的頂部位置也小於窗口的底部位置。

這是一個視覺示例

計算高度和寬度

在我們的檢測功能中，我們需要獲取各種元素的高度和位置以正確計算事物，這是我們使用jQuery的高度功能的地方。 對這些高度功能的工作原理

的細分很重要

height（）和width（）

高度（）和width（）函數返回元素的高度或寬度。他們排除了所有填充，邊界和邊緣。

為了進行完整故障，請訪問高度或寬度文檔。

inninheight（）和innerwidth（）函數返回元素的高度或寬度，包括其附加填充（但是它不包括邊界和邊緣）

>

要進行完整的故障，請訪問Interheight或InterWidth文檔。 >

此外，您還可以通過將真實值傳遞給函數來指定以包括其邊緣。 >

要進行完整的故障，請訪問外部或外部寬水文檔

>滾動動畫示例

下面列出的是一系列動畫，使用我們討論過的基礎知識。這些示例將尋找動畫元素，並在視圖中應用活動元素。

> 您要移動的

元素都應具有標準類，例如動畫元素，將其位置設置為相對或絕對。此外，如果要創建多個效果，則可以創建相應的類，例如滑左左，可以將其與視圖類結合使用。然後，您應該將轉換應用於Animation-Element.slide-Left.inview

等類

>從左

滑入

對於我們的第一個示例，我們將在進入視口時從左側滑動。 我們通過在元素x軸上使用Translate3D來實現這一目標。

>請參閱滾動上的筆CSS動畫 - 從sitepoint（@sitepoint）從codepen上滑入。

> 在此示例中，我們使用它來顯示員工配置文件，但是您可以重新利用相同的功能以在所需的任何元素中滑動。

>從底部淡入

這次，當用戶滾動時，我們將從底部向上淡出元素。我們通過元素Y軸上的翻譯3D實現了這一目標。

在此示例中，我列出了有關網格結構中有關主題的課程信息。當用戶向下滾動時，每張卡中的每張卡都會淡入並向上移動，並顯示有關該課程的信息。

>請參閱滾動上的筆CSS動畫 - codepen上的sitepoint（@sitepoint）從底部淡出。

多步彈力動畫

在最後的示例中，我們將使用多階段動畫。為此，我們將定義將旋轉與翻譯結合的自定義密鑰幀動畫。這種動畫可以幫助展示您網站的區域（在此示例中，我們正在展示員工資料）。

>請參閱滾動上的Pen CSS動畫 - codepen上的sitepoint（@sitepoint）的多步驟移動。

從這裡到哪裡？

>

>從這裡您可以採用您學到的概念並將其應用於您的項目。

>現在您可以檢測到何時在視圖中進行元素，您可以鏈接其他轉換或效果來創建交互式接口。例如，當元素進入視口（以及其轉換之後）時，您可以轉換其他元素，例如標題中的褪色，圖像中的縮放等。

>您已經在項目中使用了這些效果嗎？還是您認為動畫被過度使用並損害用戶體驗？無論哪種方式，我都希望在評論中收到您的來信。

>>將您的CSS技能帶入我們的CSS Master，Tiffany B. Brown的第二版，涵蓋CSS動畫，過渡，轉型等。 經常詢問的問題（常見問題解答）關於使用jQuery和CSS3

的基於滾動的動畫

>使用jQuery和css3？

創建基於捲軸的動畫的基本要求是什麼，可以使用JQuery和CSS3創建基於捲軸的動畫，您需要對HTML，CSS和JavaScript的基本了解。您還需要在項目中包含jQuery庫。 JQuery是一個快速，小且功能豐富的JavaScript庫，簡化了HTML文檔遍歷，事件處理和動畫。另一方面，CSS3是級聯樣式語言的最新演變，旨在擴展CSS2.1。它帶來了許多期待已久的新穎性，例如圓角，陰影，漸變，過渡或動畫。

>

>我如何開始使用jQuery和css3？創建基於捲軸的動畫，您首先需要在HTML文件中包含jQuery庫。您可以從jQuery網站下載它，也可以直接從內容交付網絡（CDN）中包含它。包含jQuery後，您可以在單獨的.js文件或HTML文件中的腳本標籤中開始編寫JavaScript代碼。然後，您可以使用jQuery的.aimate（）方法來創建動畫。對於CSS3動畫，您可以使用KeyFrames和Animation屬性。

我可以控制jQuery中基於滾動的動畫的速度嗎？在jQuery。 .aimate（）方法接受持續時間參數，該參數確定動畫將運行多長時間。持續時間以毫秒為單位；較高的值表示動畫速度較慢，而不是更快的動畫。

>如何使我的基於捲軸的動畫更順暢？

​​

使您的基於捲軸的動畫更加順暢，您可以使用'siele' -out'CSS3過渡 - 定時功能屬性的值。該值指定動畫應緩慢啟動，在中間加速，然後在末尾放慢速度。這可以給您的動畫帶來更自然和平滑的感覺。

當用戶滾動到頁面上的某個點時，我如何觸發動畫？

您可以使用jquery's .scroll（）方法觸發事件，當用戶在用戶滾動到某個點上的某個點時頁。在.scroll（）方法中，您可以使用.scrolltop（）方法來獲取滾動條的當前垂直位置。然後，您可以使用if語句檢查滾動位置是否超出了一定點，如果是的，則觸發動畫。

我可以使用無jQuery的CSS3動畫嗎？可以在沒有jQuery的情況下使用CSS3動畫。 CSS3引入了@KeyFrames規則和動畫屬性，該屬性允許您僅使用CSS創建動畫。但是，jQuery可以對動畫提供更多的控制和靈活性，例如基於用戶互動的動態更改動畫屬性。

>

>如何停止或暫停JQuery中的基於滾動的動畫？您可以使用.stop（）方法在jQuery中停止基於捲軸的動畫。此方法可以在所選元素上停止當前運行的動畫。要暫停動畫，這要復雜得多，因為jQuery並不是本地支持動畫暫停。但是，您可以通過使用插件或手動跟踪動畫狀態和進度來實現這一目標。

>

>如何使用jQuery和css3？

我可以使用jQuery一次動畫多個CSS屬性嗎？ >是的，您可以使用jQuery的.aimate（）方法一次對多個CSS屬性進行動畫動畫。您只需要在.aimimate（）方法的屬性對象參數中包含要動畫為鍵值對的屬性。

如何確保我的基於滾動的動畫在不同的瀏覽器上工作？ >

以上是使用jQuery和CSS3創建基於捲軸的動畫3的詳細內容。更多資訊請關注PHP中文網其他相關文章！