這是一款動畫效果很搶眼的響應式內容滑動插件,主要特色:使用 CSS3 過渡特效、觸屏設備、跨瀏覽器以及響應式佈局。
Sequence.js 是一個非常現代的圖片滑動效果,特別適合電子商務網站或者企業產品展示功能。帶有圖片縮率圖,能夠呈現全屏圖片瀏覽效果。結合 CSS3 Transition 實現響應式的滑塊效果。
本身無內置的主題,可以根據需要完全自定義。
本經驗分享如何使用Sequence.js響應式內容滑動插件。
工具/原料
筆記本電腦或是臺式機
互聯網
Sequence.js響應式內容滑動插件
方法/步驟
訪問Sequence.js官方網站,如下圖所示。
點擊導航欄的【Download】超鏈接,如下圖所示。
進入下載頁面,下載Sequence.js文件,如下圖所示。
解壓Sequence-master.zip文件,有用的文件目錄,如下圖所示。
特性:Rapid development of step-based animated applications
All of the JavaScript functionality you need built-in, so you can concentrate on substance and style
本經驗以modern-slide-in效果為例,點擊下圖位置。
下載modern-slide-in,如下圖所示。
HTML頁面代碼
body {
margin: 0;
padding: 0;
}
-
Powered by Sequence.js
The responsive CSS animation framework
-
Create Unique Animated Themes
For sliders, presentations,
banners, and other step-based applications -
Rapid Development of Step-Based Applications
All of the JavaScript functionality you need built-in
該案例效果,如下圖所示。
注意事項
該插件依賴JQuery,需要引入JQuery庫。
本插件適合做高版本瀏覽器的banner圖片切換效果