[JS]スマホもOK!縦長ページやスライダーでコンテンツをさまざまなアニメーションで表示させるスクリプト -pageSwitch

縦長ページで次のコンテンツを表示する時、画像やテキストを配置したコンテンツスライダーで、すぅーとスライドさせたり、ぱたり、くるり、ぐい~んなど、ブラウザいっぱいのコンテンツやパネルをさまざまなアニメーションで表示させるスクリプトを紹介します。

HTMLは非常にシンプルで、スマホやタブレット、古いIEでも動作します。
スマホで、カーテンを引き上げるように表示させるのも簡単です。

デモのキャプチャ

pageSwitch -GitHub

pageSwitchのデモ

pageSwitchは121種類のアニメーションをサポートしており、さまざまな動きをデモページで楽しめます。
下記はブラウザ表示ですが、スマホでもタブレットでもOKです。

デモのキャプチャ

デモページ

いくつかアニメーションgifにしてみました。

デモのアニメーション

flipClock

パネル式の時のように半分から折れて、ぱたりと切り替わります。
操作はスクロール、ドラッグ、ホイール、矢印キーとスマホのスワイプに対応しています。

デモのアニメーション

scrollCover

前のパネルに覆い被さるように切り替わります。

デモのアニメーション

slide

スライドも一味加えられたかっこいいアニメーションです。

デモのアニメーション

flip3d

3Dも充実しており、他にも斜めに倒れてスライドして合体するのなど、かっこいいのが揃っています。

アニメーションの一覧です。

デモのキャプチャ

エフェクトの種類

ブラウザいっぱいのコンテンツにも対応しており、デスクトップでもスマホでもタブレットでも楽しめます。

デモのキャプチャ

デモページ

pageSwitchの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

jQueryやZeptoのプラグインとしても動作します。

Step 2: HTML

各パネルはdiv要素で実装し、それらを内包するラッパーにidを付与します。
div内は画像だけでなく、さまざまな要素を配置したコンテンツでもOKです。

Step 3: JavaScript

ラッパーのIDを指定して、スクリプトを実行します。

jQuery/Zepto使用時は、下記のように記述します。

top of page

©2016 coliss