每日一個前端特效-視覺差

Good Study.Day day up.

今天想學習的是一種叫視覺差的特效。

jQuery庫 / 視覺差滾動效果_jQuery之家 這裡面是一些收集的效果，感覺挺炫酷的。

首先來個簡單特效。背景和元素滾動速度不同：

http://codepen.io/MKFMIKU/pen/pEvwdj

這裡的原理是讓背景以更加快的速度滾動來引起視覺差。

第二種是背景固定，全屏滑動時切換背景：

http://codepen.io/MKFMIKU/pen/YGPQBR

這裡的原理是讓背景固定並且在z-軸上隱藏，當上層滑上去時下層就有了種被打開的感覺。

第三種是頁面里的元素隨著滑鼠移動而改變位置製造出一個動態的效果

http://codepen.io/MKFMIKU/pen/mAyrEN

這裡使用的是 Parallax

GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device

從官方特效中可以看出很強大

http://matthew.wagerfield.com/parallax/

這裡有一些大神寫下的輪子，可以很方便的調用：

GitHub - pixelcog/parallax.js: Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

GitHub - markdalgleish/stellar.js: Stellar.js

參考資料：

http://f2e.tming.net.cn/special/parallaxscrolling/

用 Stellar.js 製作視差滾動效果