Blog

css3のtransformを使って画像のモーダルウィンドウを作ってみた

2014.03.18Cat:css3 jQuery デザイナー

css3でインタラクティブな動きが実装出来るは周知のことでしたが、
実際のサイトで使われていることも多くなってきました。

最近気になったのが以下のサイトになります。

はじめて持つなら、このカード。三井住友VISAデビュープラスカード | 三井住友VISAカード

css3をふんだんに使用して、インタラクティブなサイトなつくりになってます。
IEはどうしているのかな思ってたんですが、IEでは普通に縦長サイトとして構成されており、
インタラクティブさは皆無でした。
これはいわゆるプログレッシブエンハンスメントの考え方で素晴らしいですね!

このサイトで気になったエフェクトをちょっと試してみたいと思い、
実際に作ってみました。

サイトではページの切り替わりとして使用されていますが、
僕の方では、モーダルウィンドウとして作りました。

DEMO

扉というか蓋というかそんな感じのものが閉まるようなエフェクトなのですが、
(下駄箱の扉の逆ver??)
こちらは、transformのperspective,rotate,と、
transform-origin、transitionを使用しています。

transformのrotate(今回はX軸)で、回転し、
perspectiveで遠近感を持たせ奥が細くみえるようにし、
transform-originで上の辺を起点にしています。
transitionはアニメーションのスピードを設定しています。

具体的なcssは以下になります。

htmlは以下です。

後は、jQueryで、写真をクリックすると、
#modalMaskにclass「on」をつけるようにしました。
jquery等でtransformを制御するのは、かってが違うようでしたので、
今回はこのようにしました。

ちなみにjQueryのソースは以下になります。

シンプルです。

昨今フラットデザインの流行も関係ありますが、
インタラクティブなサイトに出来る事が重要視されており、
そのなかでcss3というは、取っ付きやすい上に従来よりも簡単に動きをつけることができます。

今後いかにこのcss3を使用し、インタラクティブなサイトを作っていくことができるかが大事ですね!

css3のtransformは奥が深いです!
特にmatrixやmatrix3dなんかは指定するために、
数値の配置の関係も把握しないといけないですし、
より高度にやろうとすると、行列の知識がないと思い通りにいかなさそうです・・・

transformに関しては以下のサイトが参考になります。

CSS Transforms についてのメモ | Unformed Building

Author Profile

Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ