ResponsiveSwitch.js

『ResponsiveSwitch.js』はレスポンシブWebデザインやスマートフォンに対応したシンプルなアニメーションスクリプトです。CSS3のtransitionやtransformを使ってアニメーションさせるだけなので、レスポンシブウェブデザインにも最適♪

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

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

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

スライドコントローラー付き: 一応スライド式にはコントローラーを付ける事ができます。コントローラーの実装はコントローラーっぽいオブジェクトをHTML内に配置するだけ。あとはCSSでコントローラーの見た目を変更する事ができます。
簡単に画像スライドアニメーションを実現: CSSでビフォーとアフターのクラスを設定するだけで、CSS3のtransitionを使ったアニメーションが簡単に実現可能。Javascriptによるアニメーションじゃないのでスマートフォンでも安定した動作をします（たぶん）。
スライドだけじゃない！回転とかもできるよ！: CSS3のtransformプロパティを使うことで画像が回転して出てきたり、スケールアップ・スケールダウンして表示するなどの凝った演出も可能。いや～CSS3って本当に便利ですよね。
jsonでのデータ読込に対応: 実行するオブジェクトへのパラメータ私はjson形式で行う事ができるため、外部jsonファイルを参照してスライドさせる内容を管理することもできます。これにより管理画面などと連携して手軽にフロントページビジュアルを変更するなんて運用もアリですよね。

更新日	バージョン	更新内容
2013-11-11	1.3.0	コントローラーとサンプルHTMLを調整した1.3.0を公開。
2013-11-10	1.2.0	公開第1弾。