創(chuàng)建運(yùn)動(dòng)是為觀眾提供有趣且互動(dòng)的體驗(yàn)的好方法。隨著現(xiàn)代網(wǎng)站提供更多的交互性,人們?cè)絹?lái)越期望簡(jiǎn)單的網(wǎng)站將提供一定程度的動(dòng)畫(huà) /運(yùn)動(dòng)來(lái)吸引訪客。
>今天,我將概述您可以適應(yīng)您的Web項(xiàng)目的技術(shù) - 滾動(dòng)到預(yù)定義的區(qū)域時(shí)觸發(fā)動(dòng)畫(huà)。這些動(dòng)畫(huà)將使用CSS變換和CSS過(guò)渡創(chuàng)建。我們還將使用jQuery檢測(cè)何時(shí)可見(jiàn)元素並添加/刪除適當(dāng)?shù)念?lèi)。
對(duì)於那些想看到此類(lèi)示例的人,您可以直接跳到演示。鑰匙要點(diǎn)
可以使用JQuery和CSS3創(chuàng)建基於捲軸的動(dòng)畫(huà),為觀眾提供交互式體驗(yàn)。當(dāng)用戶(hù)滾動(dòng)進(jìn)入預(yù)定義的區(qū)域時(shí),這些動(dòng)畫(huà)會(huì)觸發(fā),從而使其更具吸引力和視覺(jué)吸引力。 該技術(shù)涉及使用CSS變換和CSS轉(zhuǎn)換,用於檢測(cè)何時(shí)可見(jiàn)元素並添加/刪除適當(dāng)?shù)念?lèi)。這種方法的考慮包括瀏覽器的兼容性和速度,現(xiàn)代瀏覽器支持2D和3D轉(zhuǎn)換以進(jìn)行平滑動(dòng)畫(huà)。
- 該過(guò)程涉及檢測(cè)視圖中的動(dòng)畫(huà)元素,掛接到滾動(dòng)事件,處理調(diào)整大小以及計(jì)算元素的高度和寬度。當(dāng)元素位於視口內(nèi)時(shí),可以觸發(fā)動(dòng)畫(huà),從而允許為交互式接口鏈接其他轉(zhuǎn)換或效果。
- > 滾動(dòng)動(dòng)畫(huà)的示例包括從左側(cè)的元素滑動(dòng),從底部向上褪色的元素以及多步彈力動(dòng)畫(huà)。這些技術(shù)可以適用於各種網(wǎng)絡(luò)項(xiàng)目,例如顯示員工資料或課程信息。
- 為什麼在滾動(dòng)上觸發(fā)動(dòng)畫(huà)?
- > >我們要在滾動(dòng)上觸發(fā)動(dòng)畫(huà)的主要原因是,當(dāng)用戶(hù)滾動(dòng)元素視圖時(shí),它們就可以激活它們。
- >我們可能希望淡入元素,或提供有趣的轉(zhuǎn)換,只有在用戶(hù)可以實(shí)際查看它們時(shí),這些元素才有意義。
使用CSS或用jQuery進(jìn)行動(dòng)畫(huà)?
>每種方法都有利弊。 jQuery(讀取JavaScript)允許您動(dòng)畫(huà)CSS不使用的內(nèi)容(例如滾動(dòng)位置或元素的屬性),而CSS動(dòng)畫(huà)對(duì)於喜歡將所有動(dòng)畫(huà)和演示邏輯的開(kāi)發(fā)人員非常有吸引力層。
>我將通過(guò)CSS使用轉(zhuǎn)換,但是根據(jù)您的情況,總有變量需要考慮。我會(huì)考慮以下因素:
>瀏覽器兼容性
由於我們的解決方案將基於轉(zhuǎn)換,因此我們的瀏覽器兼容性將僅限於支持2D變換或3D變換的瀏覽器。
>所有現(xiàn)代瀏覽器都將支持3D變換,幾個(gè)舊的舊瀏覽器(例如Internet Explorer 9和Opera 11.5)將支持2D變換。桌面和移動(dòng)瀏覽器的總體支持都是全面的。
如果您使用庫(kù)的1.x版本,則速度
>我們想要快速,流暢的動(dòng)畫(huà),尤其是在移動(dòng)設(shè)備方面。因此,它總是最好在可能的情況下使用過(guò)渡和轉(zhuǎn)換。
示例將對(duì)較舊的瀏覽器使用3D變換,並使用2D秋季。我們想強(qiáng)制硬件加速度以速度,因此必須進(jìn)行3D轉(zhuǎn)換(我們將使用Translate3D以及其他導(dǎo)致GPU加速渲染的功能)。
> jQuery的動(dòng)畫(huà)方法比GPU輔助轉(zhuǎn)換要慢得多,因此我們將使用jQuery進(jìn)行活動(dòng)處理 /計(jì)算,而不是為了我們的動(dòng)畫(huà)本身(因?yàn)槲覀兿M鼈儽M可能流暢)。
旁注我們都知道jQuery! == javascript,對(duì)嗎?好吧,事實(shí)證明,將香草JS用於動(dòng)畫(huà)可能並不是一個(gè)不好的想法。儘管這超出了本教程的範(fàn)圍,但對(duì)於那些有興趣了解更多信息的人來(lái)說(shuō),這是有關(guān)該主題的兩篇出色文章:
>
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à)的元素的集合。
請(qǐng)注意變量前面的美元符號(hào)。這是指出他們?nèi)菁{jQuery對(duì)像或?qū)ο蟮氖占膽T例。
>
掛在滾動(dòng)事件
接下來(lái),我們創(chuàng)建了聆聽(tīng)滾動(dòng)事件的事件處理程序。當(dāng)我們滾動(dòng)頁(yè)面時(shí),這將發(fā)射。我們將其引用到我們的check_if_in_view函數(shù)(我們將在一分鐘內(nèi)獲?。C看螡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ì)算高度和寬度
在我們的檢測(cè)功能中,我們需要獲取各種元素的高度和位置以正確計(jì)算事物,這是我們使用jQuery的高度功能的地方。 對(duì)這些高度功能的工作原理的細(xì)分很重要
height()和width()高度()和width()函數(shù)返回元素的高度或?qū)挾?。他們排除了所有填充,邊界和邊緣?

此外,您還可以通過(guò)將真實(shí)值傳遞給函數(shù)來(lái)指定以包括其邊緣。 要進(jìn)行完整的故障,請(qǐng)?jiān)L問(wèn)外部或外部寬水文檔
下面列出的是一系列動(dòng)畫(huà),使用我們討論過(guò)的基礎(chǔ)知識(shí)。這些示例將尋找動(dòng)畫(huà)元素,並在視圖中應(yīng)用活動(dòng)元素。 >從左 對(duì)於我們的第一個(gè)示例,我們將在進(jìn)入視口時(shí)從左側(cè)滑動(dòng)。 我們通過(guò)在元素x軸上使用Translate3D來(lái)實(shí)現(xiàn)這一目標(biāo)。
>
>現(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 >我如何開(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屬性。 >如何使我的基於捲軸的動(dòng)畫(huà)更順暢? > 如何確保我的基於滾動(dòng)的動(dòng)畫(huà)在不同的瀏覽器上工作? >inninheight()和innerwidth()函數(shù)返回元素的高度或?qū)挾龋ㄆ涓郊犹畛洌ǖ撬话ㄟ吔绾瓦吘墸?/h4>>
>滾動(dòng)動(dòng)畫(huà)示例
元素都應(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)
>請(qǐng)參閱滾動(dòng)上的筆CSS動(dòng)畫(huà) - 從sitepoint(@sitepoint)從codepen上滑入。
>
在此示例中,我們使用它來(lái)顯示員工配置文件,但是您可以重新利用相同的功能以在所需的任何元素中滑動(dòng)。
>請(qǐng)參閱滾動(dòng)上的筆CSS動(dòng)畫(huà) - codepen上的sitepoint(@sitepoint)從底部淡出。
從這裡到哪裡? >使用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à)。
>我可以控制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à)更加順暢,您可以使用'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à)。 >
>如何停止或暫停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一次動(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ì)的屬性。
以上是使用jQuery和CSS3創(chuàng)建基於捲軸的動(dòng)畫(huà)3的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣圖片

Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序,用於創(chuàng)建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門(mén)文章

熱工具

記事本++7.3.1
好用且免費(fèi)的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強(qiáng)大的PHP整合開(kāi)發(fā)環(huán)境

Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具

SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)

熱門(mén)話題

在JavaScript中,選擇單行註釋?zhuān)?/)還是多行註釋?zhuān)?/)取決於註釋的目的和項(xiàng)目需求:1.使用單行註釋進(jìn)行快速、內(nèi)聯(lián)的解釋?zhuān)?.使用多行註釋進(jìn)行詳細(xì)的文檔說(shuō)明;3.保持註釋風(fēng)格的一致性;4.避免過(guò)度註釋?zhuān)?.確保註釋與代碼同步更新。選擇合適的註釋風(fēng)格有助於提高代碼的可讀性和可維護(hù)性。

是的,javascriptcommentsarenectary和shouldshouldshouldseffectional.1)他們通過(guò)codeLogicAndIntentsgudedepleders,2)asevitalincomplexprojects,和3)handhanceClaritywithOutClutteringClutteringThecode。

Java和JavaScript是不同的編程語(yǔ)言,各自適用於不同的應(yīng)用場(chǎng)景。 Java用於大型企業(yè)和移動(dòng)應(yīng)用開(kāi)發(fā),而JavaScript主要用於網(wǎng)頁(yè)開(kāi)發(fā)。

JavascriptconcommentsenceenceEncorenceEnterential gransimenting,reading and guidingCodeeXecution.1)單inecommentsareusedforquickexplanations.2)多l(xiāng)inecommentsexplaincomplexlogicorprovideDocumentation.3)

評(píng)論arecrucialinjavascriptformaintainingclarityclarityandfosteringCollaboration.1)heelpindebugging,登機(jī),andOnderStandingCodeeVolution.2)使用林格forquickexexplanations andmentmentsmmentsmmentsmments andmmentsfordeffordEffordEffordEffordEffordEffordEffordEffordEddeScriptions.3)bestcractices.3)bestcracticesincracticesinclud

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScriptIspreferredforredforwebdevelverment,而Javaisbetterforlarge-ScalebackendsystystemsandSandAndRoidApps.1)JavascriptexcelcelsincreatingInteractiveWebexperienceswebexperienceswithitswithitsdynamicnnamicnnamicnnamicnnamicnemicnemicnemicnemicnemicnemicnemicnemicnddommanipulation.2)

JavaScript中的日期和時(shí)間處理需注意以下幾點(diǎn):1.創(chuàng)建Date對(duì)像有多種方式,推薦使用ISO格式字符串以保證兼容性;2.獲取和設(shè)置時(shí)間信息可用get和set方法,注意月份從0開(kāi)始;3.手動(dòng)格式化日期需拼接字符串,也可使用第三方庫(kù);4.處理時(shí)區(qū)問(wèn)題建議使用支持時(shí)區(qū)的庫(kù),如Luxon。掌握這些要點(diǎn)能有效避免常見(jiàn)錯(cuò)誤。
