[JS]スマホもOK！縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch
Post on:2016年1月25日
sponsorsr
縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい～んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。
HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。
スマホで、カーテンを引き上げるように表示させるのも簡単です。
pageSwitchのデモ
pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。
下記はブラウザ表示ですが、スマホでもタブレットでもOKです。
いくつかアニメーションgifにしてみました。
パネル式の時のように半分から折れて、ぱたりと切り替わります。
操作はスクロール、ドラッグ、ホイール、矢印キーとスマホのスワイプに対応しています。
前のパネルに覆い被さるように切り替わります。
スライドも一味加えられたかっこいいアニメーションです。
3Dも充実しており、他にも斜めに倒れてスライドして合体するのなど、かっこいいのが揃っています。
アニメーションの一覧です。
エフェクトの種類
ブラウザいっぱいのコンテンツにも対応しており、デスクトップでもスマホでもタブレットでも楽しめます。
pageSwitchの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 |
<script type="text/javascript" src="src/pageSwitch.js"></script> |
jQueryやZeptoのプラグインとしても動作します。
|
1 2 |
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="src/pageSwitch.js"></script> |
Step 2: HTML
各パネルはdiv要素で実装し、それらを内包するラッパーにidを付与します。
div内は画像だけでなく、さまざまな要素を配置したコンテンツでもOKです。
|
1 2 3 4 5 6 7 |
<div id="imgs"> <div><img src="1.jpg" alt="画像"></div> <div><img src="2.jpg" alt="画像"></div> <div><img src="3.jpg" alt="画像"></div> <div><img src="4.jpg" alt="画像"></div> <div><img src="5.jpg" alt="画像"></div> </div> |
Step 3: JavaScript
ラッパーのIDを指定して、スクリプトを実行します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var pw=new pageSwitch('imgs',{ duration:600, //時間 direction:1, //方向、0:横、1:縦 start:0, //スタートのパネル loop:false, //ループの有無 ease:'ease', //イージング transition:'slide', //エフェクトの種類 freeze:false, //凍結画面の有無 mouse:true, //マウス操作の有無 mousewheel:false, //マウスのホイール操作の有無 arrowkey:false, //矢印キーでの操作の有無 autoplay:false, //自動再生の有無 interval:int //新しいスライドショーの間隔 }); |
jQuery/Zepto使用時は、下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$.fn.extend({ pageSwitch:function(cfg){ this[0].ps=new pageSwitch(this[0],cfg); return this; }, ps:function(){ return this[0].ps; } }); $(container_id).pageSwitch({ duration:1000, transition:'slide' }); $(container_id).ps().next(); |
sponsors
