推薦指數(shù):★★★★★
使用難度:★★☆
適用范圍:炫酷的個人簡介载城,或者結(jié)合你的創(chuàng)意應(yīng)用于各種場合
GitHub數(shù)據(jù):
可能有的朋友還不太清楚什么是“視差滾動”台诗,簡單來說就是將頁面的動態(tài)效果和鼠標滾輪的滾動結(jié)合起來祟身,讓用戶在滾動滾輪的過程中看到豐富多彩炫酷多變的頁面效果汰具。
這個插件是我覺得比較好用的一個讽膏,和前面介紹過的impress.js使用方法比較像桨醋,用起來比較簡單棚瘟。Star數(shù)對得起它的功能。
不得不提的是喜最,它居然兼容低版本IE偎蘸。。瞬内。
一句話講解原理:通過在標簽屬性中進行設(shè)置來控制動畫效果迷雪。
效果截圖:
大家最好自己打開Demo看看,非常炫酷虫蝶!
缺點:
上手有一定難度章咧,不過只要用心還是很容易學會的。
一段代碼教程:
<div
data-0="background-color:rgb(0,0,255);"
data-500="background-color:rgb(255,0,0);">
WOOOT
</div>
data-0和data-500是開始和結(jié)束的位置能真,可以看到分別設(shè)置了兩個背景顏色赁严。skrollr可以自動幫你實現(xiàn)兩個顏色的過渡扰柠,非常智能。
skrollr地址
歡迎掃描二維碼關(guān)注我的微信號“GitHub不完全裝B指南”疼约,獲取最新文章卤档。
謝謝~