和田憲幸のブログ

なのでclassNameをスイッチするためだけに特化したスクリプトを書いてみた。CSS3から利用できるtransitionを使えばCSS側でアニメーションを勝手にやってくれるためだ。いいよねCSS3。

ResponsiveSwitch.jsサンプルのURLはこちら

簡単に言うとレイヤーを2枚重ねして1枚目と2枚目を交互に変えているだけ。その間にtransitionを発動させるためclassNameの変更を加えているという寸法です。つまりすべての変化はCSS側で指定できるということ。コンテンツをjsonに格納しなきゃいけないなど、ちょっと不本意な点は残ったけど、モバイル用のイニシャライズ時の帯域軽減などを考慮すると、やはりコレがベストなんじゃないかなと。

jsonと聞いてピンと来た方もいると思いますが、これは動的に管理も可能。管理画面などで管理した情報をjsonで渡すことでダイナミックに差し替えが可能という仕様です。ちなみにレガシーブラウザでも問題なく動作すると思いますが、アニメーションはしません。こういうヤリカタをプログレッシブ・エンハンスメントと言うらしいね。どうでもいいけど。

レスポンシブWebでサイトを作る時は過去に使っていたJavascriptで引っかかることも多いと思うので、こういうシンプルな仕組みが今後主流になっていくんじゃないかな。2日立て続けに新作書いちゃったよ。やればできるじゃん俺。

追記＆備忘録

コントローラーとマウスオーバー時の制御を入れたいな。