Sequence.js響應式內容滑動插件使用攻略?

Tags: 插件, 內容,

這是一款動畫效果很搶眼的響應式內容滑動插件,主要特色:使用 CSS3 過渡特效、觸屏設備、跨瀏覽器以及響應式佈局。

Sequence.js 是一個非常現代的圖片滑動效果,特別適合電子商務網站或者企業產品展示功能。帶有圖片縮率圖,能夠呈現全屏圖片瀏覽效果。結合 CSS3 Transition 實現響應式的滑塊效果。

  本身無內置的主題,可以根據需要完全自定義。

本經驗分享如何使用Sequence.js響應式內容滑動插件。

工具/原料

筆記本電腦或是臺式機

互聯網

Sequence.js響應式內容滑動插件

方法/步驟

訪問Sequence.js官方網站,如下圖所示。

Sequence.js響應式內容滑動插件使用攻略

點擊導航欄的【Download】超鏈接,如下圖所示。

Sequence.js響應式內容滑動插件使用攻略

Sequence.js響應式內容滑動插件使用攻略

進入下載頁面,下載Sequence.js文件,如下圖所示。

Sequence.js響應式內容滑動插件使用攻略

解壓Sequence-master.zip文件,有用的文件目錄,如下圖所示。

Sequence.js響應式內容滑動插件使用攻略

特性:Rapid development of step-based animated applications

All of the JavaScript functionality you need built-in, so you can concentrate on substance and style

Sequence.js響應式內容滑動插件使用攻略

Sequence.js響應式內容滑動插件使用攻略

本經驗以modern-slide-in效果為例,點擊下圖位置。

Sequence.js響應式內容滑動插件使用攻略

下載modern-slide-in,如下圖所示。

Sequence.js響應式內容滑動插件使用攻略

HTML頁面代碼

Modern Slide In - Sequence.js Theme

  • A female model with long curly brown hair wears a gray sweater, brown shorts, bright yellow socks, and black high heel shoes. She raises one leg, and tilts her head to the side

    Powered by Sequence.js

    The responsive CSS animation framework

  • A pale-skin female model with dark eye shadow and tied up hair wears dark green gloves, gray linen boots, and a woolen lined hood on a black zip-up jacket over a black top and shorts. She holds her jacket open with both hands and slightly raises her left knee whilst looking to the floor

    Create Unique Animated Themes

    For sliders, presentations,
    banners, and other step-based applications

  • A pale-skin female model with platted hair wears a dark button-up jacket with gray shorts, black tights, brown shoes, and black gloves. She throws both arms back and raises one knee -- as if mid-jump -- whilst looking into the distance

    Rapid Development of Step-Based Applications

    All of the JavaScript functionality you need built-in

該案例效果,如下圖所示。

Sequence.js響應式內容滑動插件使用攻略

注意事項

該插件依賴JQuery,需要引入JQuery庫。

本插件適合做高版本瀏覽器的banner圖片切換效果

相關問題答案