読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

サイト制作スキルを伸ばしたい方へ

f:id:wp-lesson:20160523183925j:plain
↓ページ中央の写真にマウスを乗せると...
http://designstub.com/livepreview.php?pid=406

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

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

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

『仕組み、原理が分かるから』です。
 
・:hover
 ⇒マウスが乗っている間だけ適用
  されるスタイルを定義する
・transform、translate
 ⇒HTMLのブロックを移動させる
・transition
 ⇒アニメーションする時間を定義

 
たったこれだけのスタイルについて定義(書くとどういう効果になるか)
を知っておけば、ある程度の動きは自在に表現できるようになります。
 
いちいち、
 
「このエフェクトはどうやるの?」
「じゃあ、あの動きはどうやるの?」
「これは?」
「それは?」
 
など、英単語を丸暗記するみたいに1つ1つを別々のものとして
勉強する時間も必要性もないんです。
 
だって、原理は同じなんだから。
 
だったら、原理を先に理解すればそれが公式となって、
どんな応用がでてきても対応できるわけです。
 
覚えることが少なくて済むんです。
 
ということは、仕組みの違うことをそのぶんたくさん身に付けることに
脳の記憶域を使えるってことです。
 
たくさんの手数を持っている人はきっとそうやっています。
 
「たくさん知ってる人はたくさん勉強して
 たくさん覚えてるんだろう」
 
「私はそんなに時間ないし、専門じゃないから」

 
という決めつけは間違ってます
 
たくさん知っている人ほど、覚えることを最小限にしています。
 
つまり、小手先のコピペノウハウではなく、
原理原則の理解を手に入れることを重視している
のです。
 
これ、ものすごく大事なこと。