在google中看到的~為了怕以後找不到~備存一下~
skrollr.js
參考自：
skrollr的範例檔案 https://github.com/Prinzhorn/skrollr
如何使用 skrollr 做出簡易的 Parallax Scrolling 網頁 https://coderwall.com/p/we0ymg/skrollr-parallax-scrolling
使用Skrollr.js實作視差滾動-(一)入門篇 http://lala0812.logdown.com/posts/240837-skrollr-easily-implement-css3-html5-parallax-scrolling
Skrollr奇妙的視差滾動效果http://www.sucaihuo.com/js/152.html
skrollr原生的JavaScript視差滾動插件庫 http://www.uedsc.com/skrollr.html
CSS transform 能旋轉、傾斜、縮放變形 box http://boohover.pixnet.net/blog/post/35341387#two-d-transform-functions
可以在github打包下載skrollr的範例檔案及說明，在參考其他網頁的使用說明~
↓首先要在</body>前引用
| <script type="text/javascript" src="skrollr.min.js"></script> |
↓接著調用skrollr函數，一樣在</body>之前
|
<script type="text/javascript"> |
↓接著就可以在<body>內想要的位置放置，
rotate()裡面需加上旋轉角度，以下的範例為從0度旋轉到360度，
當滑鼠在0的位置時，div初始為0度，當滑鼠滾到500的位置時，div轉為360度
※函數括號內的角度參數必須加上單位，可以是 deg (角度 ° ) 、 rad (弧度) 、 grad (梯度) ，大小寫皆可
顏色則是從rgb(0,0,255)轉換到rgb(255,0,0)
※當其中一階段有某一函數時，其他階段也必須要有，否則將不會變化
例如data-0有background-color，data-500也必須有background-color
|
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" |
除了rotate，還有其他CSS的函數，例如↓：
| rotate(θ) 指定元素以參考點為中心軸 2D 旋轉 θ 度。 skewX(θ) 指定元素以參考點為中心軸沿著橫向傾斜 θ 度。 skewY(θ) 指定元素以參考點為中心軸沿著縱向傾斜 θ 度。 skew(θx,θy) 指定元素以參考點為中心軸沿著橫向傾斜 θx 度、 縱向傾斜 θy 度。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有沿橫向傾斜。September, 2012 W3C 草書又復原此項 scaleX(m) 指定元素由參考點橫向縮放 m 倍。 scaleY(m) 指定元素由參考點縱向縮放 m 倍。 scale(mx,my) 指定元素由參考點 2D 橫向縮放 mx 倍、縱向縮放 my 倍，等於是結合 scaleX(mx), scaleY(my) 。參數如果只指定 1 個，省略的第 2 個參數，會等於第 1 個，也就是橫向、縱向以相同比例縮放。 translateX(o) 指定元素由參考點橫向移動 o 距離。 translateY(o) 指定元素由參考點縱向移動 o 距離。 translate(ox,oy) 指定元素由參考點 2D 橫向移動 ox 距離、縱向移動 oy 距離，等於是結合 translateX(ox), translateY(oy) 。參數如果只指定 1 個，省略的第 2 個參數，會視為 0 ，也就是只有橫向移動。 matrix(a,b,c,d,e,f) 指定元素由參考點依據數學變形矩陣 (transformation matrix) 的 6 個參數值產生 2D 變形。 可以參考 http://www.css88.com/tool/css3Preview/Transform-Matrix.html 線上輸入參數、觀看結果 |
↓圖片漸漸模糊效果：
|
<div data-2100="-webkit-filter: blur(0px);" data-2400="-webkit-filter: blur(5px);"> |
↓圖片漸漸淡出效果(從不透明變透明)：
|
<div data-2100="opacity: 1;" data-2400="opacity: 0;"> |
如果是以物件(其他div或文字)作為移動基準，則可在div中加上 data-anchor-target="#foo"
#foo 可代換為物件的 id
| <div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);" data-anchor-target="#foo"> WOOOT </div> |
※顏色的變化限制只能用rgb()/rgba()及hsl()/ hsla()，不能使用#FFF這種16進制格式
但可透過skrollr其他插件進行轉換
綜合以上，只要將html檔及skrollr.min.js放在同一個資料夾裡，再將以下代碼貼到html檔中，滾動滑鼠，就可以看到一條旋轉變色的線囉！
呈現樣子請參考：
http://prinzhorn.github.io/skrollr/examples/docu/2.html
|
<!DOCTYPE html> </head> |
留言列表
