札幌Web制作のシンクグラフィカ

ResponsiveSwitch.jsの概要

widthやheightを指定する類のjqueryライブラリとレスポンシブWebの相性ってあまり良くないですよね。逆にCSSですべての要素を指定できればコレほど楽な事はありません。

『ResponsiveSwitch.js』はアニメーショントゥイーンの前後をCSSで指定し、クラス名をスイッチングすることでCSS3のtransitionやtransformを使ってアニメーションさせるためのJavascriptライブラリです。

CSSで指定できることはすべてできるので、HTML5に最適化されたスマートフォンブラウザでも問題なくアニメーションを実現。メディアクエリを利用したレスポンシブWebの場合でもリニアにサイズを変更可能です。

ResponsiveSwitch.jsの機能

スライドコントローラー付き

一応スライド式にはコントローラーを付ける事ができます。コントローラーの実装はコントローラーっぽいオブジェクトをHTML内に配置するだけ。あとはCSSでコントローラーの見た目を変更する事ができます。

簡単に画像スライドアニメーションを実現

CSSでビフォーとアフターのクラスを設定するだけで、CSS3のtransitionを使ったアニメーションが簡単に実現可能。Javascriptによるアニメーションじゃないのでスマートフォンでも安定した動作をします（たぶん）。

スライドだけじゃない！回転とかもできるよ！

CSS3のtransformプロパティを使うことで画像が回転して出てきたり、スケールアップ・スケールダウンして表示するなどの凝った演出も可能。いや～CSS3って本当に便利ですよね。

jsonでのデータ読込に対応

実行するオブジェクトへのパラメータ私はjson形式で行う事ができるため、外部jsonファイルを参照してスライドさせる内容を管理することもできます。これにより管理画面などと連携して手軽にフロントページビジュアルを変更するなんて運用もアリですよね。

デモサイト

https://lab.synck.com/ResponsiveSwitch.js/example.html

ResponsiveSwitch.jsの更新履歴