【jQuery無しでハイセンスなロールオーバー】

↓ページ中央の写真にマウスを乗せると...
http://designstub.com/livepreview.php?pid=406

いい感じにロールオーバーアクションが発生します。
　
具体的に何が起きるかというと、
　
・写真が1.2倍に拡大する
・写真の上に水色のレイヤーが浮かび上がる
・水色のレイヤーの上に文字が2行表示され、
　1行目は少し上から、2行目は少し下から
　中央に向かって移動する
　
これら３つの動作（アクション）が、1秒以内に連続的に発生しています。
　
通常、こういう動きを伴う表現は

「JavaScriptは分からないから・・・」
「jQueryは分からないから・・・」

と敬遠されがちですが、
　
なんのことはない。
　
ただのスタイルシート（CSS）です。
CSSで背景や文字に色を付けられる人なら、
ちょっと勉強するだけでカンタンに実装できます。
　
なぜ「カンタン」かというと、

『仕組み、原理が分かるから』です。
　
・:hover
　⇒マウスが乗っている間だけ適用
　　されるスタイルを定義する
・transform、translate
　⇒HTMLのブロックを移動させる
・transition
　⇒アニメーションする時間を定義
　
たったこれだけのスタイルについて定義（書くとどういう効果になるか）
を知っておけば、ある程度の動きは自在に表現できるようになります。
　
いちいち、
　
「このエフェクトはどうやるの？」
「じゃあ、あの動きはどうやるの？」
「これは？」
「それは？」
　
など、英単語を丸暗記するみたいに１つ１つを別々のものとして
勉強する時間も必要性もないんです。
　
だって、原理は同じなんだから。
　
だったら、原理を先に理解すればそれが公式となって、
どんな応用がでてきても対応できるわけです。
　
覚えることが少なくて済むんです。
　
ということは、仕組みの違うことをそのぶんたくさん身に付けることに
脳の記憶域を使えるってことです。
　
たくさんの手数を持っている人はきっとそうやっています。
　
「たくさん知ってる人はたくさん勉強して
　たくさん覚えてるんだろう」
　
「私はそんなに時間ないし、専門じゃないから」
　
という決めつけは間違ってます。
　
たくさん知っている人ほど、覚えることを最小限にしています。
　
つまり、小手先のコピペノウハウではなく、
原理原則の理解を手に入れることを重視しているのです。
　
これ、ものすごく大事なこと。