[JS]レスポンシブ対応の使いやすいスライダーを探している人にオススメのスクリプト -wallop
Post on:2015年9月1日
sponsorsr
スマホやタブレットで快適に動作し、プログレッシブエンハンスメントを取り入れて実装されたスライダーのスクリプトを紹介します。
HTMLは非常にシンプルで、JavaScriptは最小限、jQueryなど他スクリプトの依存無しの超軽量スクリプトです。
wallopの特徴
- モバイルファースト
- プログレッシブエンハンスメント
- アニメーションは軽量のCSSで
- JavaScriptは最低限で実装
- フレキシブル&スケーラブル
- カスタムイベントとAPIが利用可能
- 超軽量4KB(minified)
- MITライセンス
wallopのデモ
デモではアニメーション無しのBasicをはじめ、Scale, Foldなどアニメーションで切り換えるスライダーを楽しめます。
iPad, iPodなどでも非常に快適に動作しました。
まずは、アニメーション無しのBasic。
切替時のアニメーションもさまざまなものが用意されています。
Scaleはパネルのサイズを変更しながら、切り換え。
See the Pen animation – scale by Pedro (@peduarte) on CodePen.
Foldは、パネルを折り畳むように。
See the Pen animation – fold by Pedro (@peduarte) on CodePen.
アニメーションは他にも、slide, fade, rotateなどが利用できます。
wallopの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
[html]
...
コンテンツ
...
[/html]
アニメーション（scale, foldなど）を利用する時は、アニメーション用のCSSを加えます。
[html]
[/html]
Step 2: HTML
スライダーの各パネルをdiv要素で内包し、パネル群とボタンをdiv要素で内包します。
[html]
[/html]
アニメーションを利用する時は、classを加えます。
[html]
[/html]
Step 3: JavaScript
パネル群とボタンを内包しているdiv要素を指定し、スクリプトを実行します。
[javascript]
[/javascript]
sponsors
