> jQuery的動(dòng)畫(huà)方法比GPU輔助轉(zhuǎn)換要慢得多，因此我們將使用jQuery進(jìn)行活動(dòng)處理 /計(jì)算，而不是為了我們的動(dòng)畫(huà)本身（因?yàn)槲覀兿Ｍ鼈儽M可能流暢）。

>

css vs. JS動(dòng)畫(huà)：哪個(gè)更快？

神話破壞：CSS動(dòng)畫(huà)與JavaScript
• >
• 現(xiàn)在回到節(jié)目…

>該技術(shù)的總體要點(diǎn)是瀏覽我們標(biāo)記為動(dòng)畫(huà)的所有元素，然後確定它們當(dāng)前是否在視口內(nèi)。讓我們介紹如何實(shí)現(xiàn)這一目標(biāo)：

選擇器緩存

滾動(dòng)是一項(xiàng)昂貴的業(yè)務(wù)。如果您將事件偵聽(tīng)器附加到滾動(dòng)事件，則每當(dāng)用戶(hù)滾動(dòng)頁(yè)面時(shí)，它都會(huì)發(fā)射很多次。由於每當(dāng)用戶(hù)滾動(dòng)時(shí)，我們將調(diào)用我們的維度 /計(jì)算功能，因此最好將選擇器返回的元素存儲(chǔ)在變量中。這被稱(chēng)為選擇器緩存，並避免我們一遍又一遍地查詢(xún)DOM。

在我們的腳本中，我們將引用窗口對(duì)象和要?jiǎng)赢?huà)的元素的集合。

>

掛在滾動(dòng)事件

接下來(lái)，我們創(chuàng)建了聆聽(tīng)滾動(dòng)事件的事件處理程序。當(dāng)我們滾動(dòng)頁(yè)面時(shí)，這將發(fā)射。我們將其引用到我們的check_if_in_view函數(shù)（我們將在一分鐘內(nèi)獲?。Ｃ看螡L動(dòng)事件啟動(dòng)時(shí)，都將執(zhí)行此功能。

<span>//Cache reference to window and animation items
</span><span>var $animation_elements = $('.animation-element');
</span><span>var $window = $(window);</span>

>處理調(diào)整大小

由於我們正在計(jì)算高度和寬度，因此我們需要考慮方向變化以及一般調(diào)整大小。

>我們可以更新活動(dòng)處理程序，以聆聽(tīng)滾動(dòng)和調(diào)整大小的事件。這將使我們的檢測(cè)功能在調(diào)整大小或更改方向時(shí)能夠起作用。

$<span>window.on('scroll', check_if_in_view);</span>

>此外，我們還使用jQuery觸發(fā)方法在DOM準(zhǔn)備就緒後立即觸發(fā)滾動(dòng)事件。我們這樣做是為了使視圖中的任何要?jiǎng)赢?huà)的元素都在視圖中被檢測(cè)到視圖，並且應(yīng)用動(dòng)畫(huà)就好像我們已經(jīng)滾動(dòng)一樣。

$<span>window.on('scroll resize', check_if_in_view);</span>

滾動(dòng)位置檢測(cè)

>此示例的實(shí)際檢測(cè)部分來(lái)自以下腳本。

$<span>window.trigger('scroll');</span>

讓我們分解這裡發(fā)生的事情。

> Check_IF_IF_IN_VIEW功能最初在DOM準(zhǔn)備就緒時(shí)，然後每次調(diào)整或滾動(dòng)時(shí)。

>我們獲得了窗口的當(dāng)前高度，以及其頂部和底部位置，因此我們知道我們正在尋找的區(qū)域。

>我們經(jīng)歷並查找所有將在其中進(jìn)行動(dòng)畫(huà)的項(xiàng)目（保存在$ Animation_Elements變量中）。對(duì)於這些元素，我們收集其高度及其頂部和底部位置（因此我們知道它在頁(yè)面上的位置）。

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

這是一個(gè)視覺(jué)示例

計(jì)算高度和寬度

的細(xì)分很重要

inninheight（）和innerwidth（）函數(shù)返回元素的高度或?qū)挾龋ㄆ涓郊犹畛洌ǖ撬话ㄟ吔绾瓦吘墸?/h4>>

要進(jìn)行完整的故障，請(qǐng)?jiān)L問(wèn)Interheight或InterWidth文檔。 >

此外，您還可以通過(guò)將真實(shí)值傳遞給函數(shù)來(lái)指定以包括其邊緣。 >

要進(jìn)行完整的故障，請(qǐng)?jiān)L問(wèn)外部或外部寬水文檔

>滾動(dòng)動(dòng)畫(huà)示例

下面列出的是一系列動(dòng)畫(huà)，使用我們討論過(guò)的基礎(chǔ)知識(shí)。這些示例將尋找動(dòng)畫(huà)元素，並在視圖中應(yīng)用活動(dòng)元素。

> 您要移動(dòng)的

元素都應(yīng)具有標(biāo)準(zhǔn)類(lèi)，例如動(dòng)畫(huà)元素，將其位置設(shè)置為相對(duì)或絕對(duì)。此外，如果要?jiǎng)?chuàng)建多個(gè)效果，則可以創(chuàng)建相應(yīng)的類(lèi)，例如滑左左，可以將其與視圖類(lèi)結(jié)合使用。然後，您應(yīng)該將轉(zhuǎn)換應(yīng)用於Animation-Element.slide-Left.inview

等類(lèi)

>從左

滑入

對(duì)於我們的第一個(gè)示例，我們將在進(jìn)入視口時(shí)從左側(cè)滑動(dòng)。 我們通過(guò)在元素x軸上使用Translate3D來(lái)實(shí)現(xiàn)這一目標(biāo)。

>請(qǐng)參閱滾動(dòng)上的筆CSS動(dòng)畫(huà) - 從sitepoint（@sitepoint）從codepen上滑入。

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

>從底部淡入

這次，當(dāng)用戶(hù)滾動(dòng)時(shí)，我們將從底部向上淡出元素。我們通過(guò)元素Y軸上的翻譯3D實(shí)現(xiàn)了這一目標(biāo)。

在此示例中，我列出了有關(guān)網(wǎng)格結(jié)構(gòu)中有關(guān)主題的課程信息。當(dāng)用戶(hù)向下滾動(dòng)時(shí)，每張卡中的每張卡都會(huì)淡入並向上移動(dòng)，並顯示有關(guān)該課程的信息。

>請(qǐng)參閱滾動(dòng)上的筆CSS動(dòng)畫(huà) - codepen上的sitepoint（@sitepoint）從底部淡出。

多步彈力動(dòng)畫(huà)

在最後的示例中，我們將使用多階段動(dòng)畫(huà)。為此，我們將定義將旋轉(zhuǎn)與翻譯結(jié)合的自定義密鑰幀動(dòng)畫(huà)。這種動(dòng)畫(huà)可以幫助展示您網(wǎng)站的區(qū)域（在此示例中，我們正在展示員工資料）。

>請(qǐng)參閱滾動(dòng)上的Pen CSS動(dòng)畫(huà) - codepen上的sitepoint（@sitepoint）的多步驟移動(dòng)。

從這裡到哪裡？

>

>從這裡您可以採(cǎi)用您學(xué)到的概念並將其應(yīng)用於您的項(xiàng)目。

>現(xiàn)在您可以檢測(cè)到何時(shí)在視圖中進(jìn)行元素，您可以鏈接其他轉(zhuǎn)換或效果來(lái)創(chuàng)建交互式接口。例如，當(dāng)元素進(jìn)入視口（以及其轉(zhuǎn)換之後）時(shí)，您可以轉(zhuǎn)換其他元素，例如標(biāo)題中的褪色，圖像中的縮放等。

>您已經(jīng)在項(xiàng)目中使用了這些效果嗎？還是您認(rèn)為動(dòng)畫(huà)被過(guò)度使用並損害用戶(hù)體驗(yàn)？無(wú)論哪種方式，我都希望在評(píng)論中收到您的來(lái)信。

>>將您的CSS技能帶入我們的CSS Master，Tiffany B. Brown的第二版，涵蓋CSS動(dòng)畫(huà)，過(guò)渡，轉(zhuǎn)型等。 經(jīng)常詢(xún)問(wèn)的問(wèn)題（常見(jiàn)問(wèn)題解答）關(guān)於使用jQuery和CSS3

的基於滾動(dòng)的動(dòng)畫(huà)

>使用jQuery和css3？

創(chuàng)建基於捲軸的動(dòng)畫(huà)的基本要求是什麼，可以使用JQuery和CSS3創(chuàng)建基於捲軸的動(dòng)畫(huà)，您需要對(duì)HTML，CSS和JavaScript的基本了解。您還需要在項(xiàng)目中包含jQuery庫(kù)。 JQuery是一個(gè)快速，小且功能豐富的JavaScript庫(kù)，簡(jiǎn)化了HTML文檔遍歷，事件處理和動(dòng)畫(huà)。另一方面，CSS3是級(jí)聯(lián)樣式語(yǔ)言的最新演變，旨在擴(kuò)展CSS2.1。它帶來(lái)了許多期待已久的新穎性，例如圓角，陰影，漸變，過(guò)渡或動(dòng)畫(huà)。

>

>我如何開(kāi)始使用jQuery和css3？創(chuàng)建基於捲軸的動(dòng)畫(huà)，您首先需要在HTML文件中包含jQuery庫(kù)。您可以從jQuery網(wǎng)站下載它，也可以直接從內(nèi)容交付網(wǎng)絡(luò)（CDN）中包含它。包含jQuery後，您可以在單獨(dú)的.js文件或HTML文件中的腳本標(biāo)籤中開(kāi)始編寫(xiě)JavaScript代碼。然後，您可以使用jQuery的.aimate（）方法來(lái)創(chuàng)建動(dòng)畫(huà)。對(duì)於CSS3動(dòng)畫(huà)，您可以使用KeyFrames和Animation屬性。

我可以控制jQuery中基於滾動(dòng)的動(dòng)畫(huà)的速度嗎？在jQuery。 .aimate（）方法接受持續(xù)時(shí)間參數(shù)，該參數(shù)確定動(dòng)畫(huà)將運(yùn)行多長(zhǎng)時(shí)間。持續(xù)時(shí)間以毫秒為單位；較高的值表示動(dòng)畫(huà)速度較慢，而不是更快的動(dòng)畫(huà)。

>如何使我的基於捲軸的動(dòng)畫(huà)更順暢？

??

使您的基於捲軸的動(dòng)畫(huà)更加順暢，您可以使用'siele' -out'CSS3過(guò)渡 - 定時(shí)功能屬性的值。該值指定動(dòng)畫(huà)應(yīng)緩慢啟動(dòng)，在中間加速，然後在末尾放慢速度。這可以給您的動(dòng)畫(huà)帶來(lái)更自然和平滑的感覺(jué)。

當(dāng)用戶(hù)滾動(dòng)到頁(yè)面上的某個(gè)點(diǎn)時(shí)，我如何觸發(fā)動(dòng)畫(huà)？

您可以使用jquery's .scroll（）方法觸發(fā)事件，當(dāng)用戶(hù)在用戶(hù)滾動(dòng)到某個(gè)點(diǎn)上的某個(gè)點(diǎn)時(shí)頁(yè)。在.scroll（）方法中，您可以使用.scrolltop（）方法來(lái)獲取滾動(dòng)條的當(dāng)前垂直位置。然後，您可以使用if語(yǔ)句檢查滾動(dòng)位置是否超出了一定點(diǎn)，如果是的，則觸發(fā)動(dòng)畫(huà)。

我可以使用無(wú)jQuery的CSS3動(dòng)畫(huà)嗎？可以在沒(méi)有jQuery的情況下使用CSS3動(dòng)畫(huà)。 CSS3引入了@KeyFrames規(guī)則和動(dòng)畫(huà)屬性，該屬性允許您僅使用CSS創(chuàng)建動(dòng)畫(huà)。但是，jQuery可以對(duì)動(dòng)畫(huà)提供更多的控制和靈活性，例如基於用戶(hù)互動(dòng)的動(dòng)態(tài)更改動(dòng)畫(huà)屬性。

>

>如何停止或暫停JQuery中的基於滾動(dòng)的動(dòng)畫(huà)？您可以使用.stop（）方法在jQuery中停止基於捲軸的動(dòng)畫(huà)。此方法可以在所選元素上停止當(dāng)前運(yùn)行的動(dòng)畫(huà)。要暫停動(dòng)畫(huà)，這要復(fù)雜得多，因?yàn)閖Query並不是本地支持動(dòng)畫(huà)暫停。但是，您可以通過(guò)使用插件或手動(dòng)跟蹤動(dòng)畫(huà)狀態(tài)和進(jìn)度來(lái)實(shí)現(xiàn)這一目標(biāo)。

>

>如何使用jQuery和css3？

我可以使用jQuery一次動(dòng)畫(huà)多個(gè)CSS屬性嗎？ >是的，您可以使用jQuery的.aimate（）方法一次對(duì)多個(gè)CSS屬性進(jìn)行動(dòng)畫(huà)動(dòng)畫(huà)。您只需要在.aimimate（）方法的屬性對(duì)象參數(shù)中包含要?jiǎng)赢?huà)為鍵值對(duì)的屬性。

如何確保我的基於滾動(dòng)的動(dòng)畫(huà)在不同的瀏覽器上工作？ >

以上是使用jQuery和CSS3創(chuàng)建基於捲軸的動(dòng)畫(huà)3的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！