「曉星派正宗❤姚金星」初學者玩 skrollr

曉星派正宗❤姚金星

網站名稱:曉星派正宗❤姚金星
使用插件:skrollr
網站頁面:結束公開。

這次玩的插件是 skrollr,諸多視差滾動效果 js 插件的其中一個。能達到的效果可見插件的範例頁面

skrollr 的導入很容易,只要在 </body> 前插入下列代碼即可(設定是預設值)

<script type="text/javascript" src="js/skrollr.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>

使用的方式也不太難,主要就是在標籤內插入 data- 後接數值(像素)以及效果。例如下列這行

<div data-0="transform:scale(0);opacity:0;" data-700="transform:scale(1);opacity:1;">

指的就是這 div 區塊,在卷軸還未往下拉(因此像素是 0)時,大小和透明度都是 0;卷軸往下拉了 700 像素,該區塊會漸變為原本大小、不透明。因為設定是預設值,所以中間平滑漸變的過程由插件處理。即使頁面未達 700 像素那麼長,該插件也會確保能拉到 700 像素以上。

這類型的視差捲動效果網站,要做得驚艷需要規劃和巧思。當然 skrollr 很有彈性,可以變動的部分不少,例如像素方面有分絕對和相對模式;不過這邊只是初學者快樂玩,所以就不深入探討了。下面推薦兩個使用 skrollr 的中文網站:

回到「曉星派正宗❤姚金星」這個網站,原本只是塗鴉兩頁漫畫《我與貓的一線之隔》的其中一格。因為覺得偽娘神棍很耐人尋味,所以就另外獨立出來做一個網站、順便玩一下插件。許個願望吧!

分類:網站網誌