純JavaScript滾動(dòng)視覺(jué)差特效插件rellax.js的安裝使用方法

發(fā)布時(shí)間：2021-09-30 15:21:08 來(lái)源：億速云閱讀：495 作者：柒染欄目：開(kāi)發(fā)技術(shù)

純JavaScript滾動(dòng)視覺(jué)差特效插件rellax.js的安裝使用方法，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

　　rellax.js是一款輕量級(jí)的純JavaScript滾動(dòng)視覺(jué)差特效插件。rellax.js壓縮后的版本僅871個(gè)字節(jié)，在手機(jī)等小屏幕設(shè)備中，插件會(huì)自動(dòng)限制視覺(jué)差特性。

　　rellax.js的安裝

　　可以通過(guò)npm來(lái)安裝rellax.js視覺(jué)差插件。

　　npminstallrellax

　　rellax.js的使用方法

　　在頁(yè)面中引入rellax.min.js文件。

　　<scripttype="text/javascript"src="js/rellax.min.js"></script>

　　HTML結(jié)構(gòu)

　　為你需要設(shè)置視覺(jué)差效果的元素添加.rellaxclass類(lèi)。然后通過(guò)data-rellax-speed屬性來(lái)設(shè)置該元素的相對(duì)滾動(dòng)速度。數(shù)值越大，滾動(dòng)的越快。

　　<divclass="rellax">

　　I’mthatdefaultchillspeedof"-2"

　　</div>

　　<divclass="rellax"data-rellax-speed="7">

　　I’msuperfast!!

　　</div>

　　<divclass="rellax"data-rellax-speed="-4">

　　I’mextraslowandsmooth

　　</div>

　　初始化插件

　　在頁(yè)面的底部，<body>標(biāo)簽之前添加下面的代碼來(lái)初始化rellax.js視覺(jué)差插件。

　　//Acceptsanyclassname

　　varrellax=newRellax('.rellax');

　　</script>

　　總之，rellax.js給大家簡(jiǎn)單的介紹了一些，希望大家多看看。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

向AI問(wèn)一下細(xì)節(jié)

猜你喜歡