シンクグラフィカ札幌

ResponsiveSwitch.js

ResponsiveSwitch.js

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

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

Youtube Movie

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

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

ResponsiveSwitch.jsの機能

ResponsiveSwitch.jsには以下の機能が盛り込まれております。

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

ResponsiveSwitch.jsのデモ

ResponsiveSwitch.jsのサンプル
まぁ見てみてください。思う存分見るといい。そして楽しむといい。少し休んでから、また見るといい。

ResponsiveSwitch.jsの更新履歴

2013-11-11コントローラーとサンプルHTMLを調整した1.3.0を公開。
2013-11-11公開第1弾。

ResponsiveSwitch.jsのダウンロード

ResponsiveSwitch.jsのダウンロード

ResponsiveSwitch.jsの過去のバージョン

Release Version Download
2013-11-11 1.3.0 Download
2013-11-11 1.2.0 Download

ResponsiveSwitch.jsのユーザレビュー

必須お名前
必須メールアドレス
必須確認のためもう一度
必須評価
必須レビュー内容
必須掲載確認