6款幫助 滾動視差jquery插件

在網頁設計中,視差滾動(Parallax Scrolling)是當下流行的網頁設計技術,經過讓多層背景以不一樣的速度或者不一樣的方向移動來造成很是有趣的 3D 運動效果。下面是一些運用視差滾動效果的優秀網頁案例: 

html

視差(Parallax)是指從不一樣的點看一個物體時造成的視覺差別,這個名詞是源自希臘文的παράλλαξις (parallaxis),意思是"改變"。在網頁設計中,視差滾動(Parallax Scrolling)是當下流行的網頁設計技術,經過讓多層背景以不一樣的速度或者不一樣的方向移動來造成很是有趣的 3D 運動效果。下面是一些運用視差滾動效果的優秀網頁案例:jquery

  相信你很是想知道上面這些網頁的精美視差滾動效果是如何實現的,今天這篇文章就和你們分享六款精心挑選的 jQuery 視差滾動效果插件,它們可以幫助你製做出精美的視差滾動效果。git

 

Sequence.jsgithub

Sequence 是一款很是優秀的 jQuery 滑動插件,能實現多種精美的滑動效果,其中之一就是水平方向的視差滾動。ide

 

 

在線演示    下載源碼

 

jQuery Scroll Pathspa

這款插件用於實現自定義路徑的滾動效果。能夠顯示使用 Canvas 繪製路徑線條和弧形,看到很是形象的運動效果。.net

 

 

在線演示    下載源碼

 

Parallax Slider with jQuery插件

這個視差滾動滑動效果屢次在個人博文中出現過,相信關注我博客的朋友必定不會陌生,有很是詳細的製做教程設計

 

 

在線演示    下載源碼

 

jQuery Parallaxhtm

這款 jQuery 插件實現了相似 Nikebetterworld.com 產品展現頁面的視差滾動效果,代碼託管在 Github 上面。

 

 

在線演示    下載源碼

 

Scrollorama

這款 jQuery 插件可以幫助你實現很是酷的滾動效果,能夠應用飛入、縮放、淡入淡出等多種過渡效果。

 

 

在線演示    下載源碼

 

Stellar.js

正如它的口號所說:實現視差滾動效果從未如此容易,的確,它能幫助輕鬆的實現網頁視差滾動效果。

 

 

在線演示    下載源碼

 

jParallax

這款基於 jQuery 的視差滾動插件使用簡單,官方提供了五種不一樣的效果演示。

 

 

在線演示    下載源碼
相關文章
相關標籤/搜索