まさ@ブログ書き込み中

まさ@ブログ書き込み中

まさの旅、英語、プログラミング、プライベートについて、色々記録しています。

日本に居ながらカルチャーショック

 

こんばんは。まさです。

 

日本に居ながらカルチャーショックを受けることだってあります。

沖縄に居る外国人とお話をしていると、そういうことは日常茶飯事。

 

今日も違う言語を使ってそういう経験をしました。

 

プログラミング言語の話ですけど。

 

今日は勉強お休みの日と称してRubyではなくJQueryを勉強しました。

 

Ruby, PHP, PythonぐらいはProgateさんでやったことありますが、JQueryに関してはProgateさんはコースが豊富でして、結構時間を食っていますが、あともう少しでJQueryコース制覇できそうです。

 

やっぱりフロントエンドなので、いつもと違うところで引っかかってしまいました。

具体的には以下の二つ。

 

  • 「非表示」といっても表示できる
  • 「拡大」っぽくても拡大してない

 

なんのこっちゃ。

 

詳しく説明します。

 

 

JQuery実践編の課題が難かったよし

今回の課題はこういうものでした。

 

f:id:masaincebu:20170429204807p:plain

 

上の写真のように、コラムがあります。

そしてそのコラムのキャプション1つ1つに写真+文字があります。

そこで、写真のところにマウスを当てると・・・

 

f:id:masaincebu:20170429204920p:plain

 

このように画像が拡大し、半透明の黒のフィルムのようなものがかかる。

そういうアニメーションを実装しろ、というものでした。

 

 

animateメソッドは使わない

まあ、どう考えてもanimateメソッド使うよね。

 

まさはそう思っていたわけです。

イメージはこんな感じ

 

(元はbackground-size: 100px auto;)

$("background-image").hover(

 function( ){

   $( this ).animate({

   "background-size" : "150px auto" 

  }, 500)

 }

)

 

 これでうまくいかない。

 

意味わからない。

 

結局、答えに至るには、

 

そもそもあの画像は徐々に拡大しているわけではない

 

ということに気づく必要がありました。

 

つまり、元の画像→大きめの画像と画像が入れ替わっていただけ。

でも僕たちの目から見たら拡大しているように見えるってわけ。

 

というわけでaddClassメソッドを使って画像の大きさを変えたというわけでした。

 

 

display:noneにしても表示できる

マウスオーバーしたら画像が拡大(大きくなった画像に入れ替わる)処理は終わりました。

 

次やるべきは、画像が大きくなったと同時に薄暗くなるようにすること。

 

ここで僕は二つの壁にぶつかるのでした。

 

関門1:background-colorを変えてもなにもかわらない

Progateさんが提供してくれたdivクラス(class="zoom-black")を使えと言われていたが、

CSSでbakcground-colorを変えてもなにも変わらない・・・。

 

むおおおおおおおおおおおおおおおおおおおおおおおおお

 

って思っていたら、樹理さんがこう言いました。

 

樹理さん:「それ、background-colorは変わっているけど超小さい点になってるんじゃね」

 

はい、そうでした。初めから提供されていたdiv要素には何も書かれておらず、よってボックスが限りなく小さい状態だったのです。

 

というわけで

hegiht : 100%

width : 100% 

 

にすることで解決。

 

関門2:非表示にしておきながら黒の半透明の背景をゆっくり出す発想が湧かない

サンプルでは、マウスオーバーで画像がぐっと大きくなり、それにつれて画像が暗くなって行くように見えます。

 

ここで難しいのは、この半透明の黒の背景を最初はdisplay : none; で非表示にしていること。

 

fadeInメソッドを思いつくも、「非表示にしてしまっているから表示できないだろう」と思ってしまいました。

 

結局浮かんだのは得意のaddClassとremoveClassメソッドで半透明の黒の背景を表示にするか、非表示にするかをマウスオーバーを起点に決めるというもの。

 

結局Progateさんの目を誤魔化すことができてクリアということに。

 

でも答え合わせをすると、display : noneで非表示にしたクラスもfadeInを使えばゆっくり表示できたのでした。

 

 

まとめ

これまで、フロントエンドとアプリケーションのための言語を触ってきました。

HTML・CSSJQueryPHPRuby。特に今はRubyに集中すべき。

 

いろんな言語があって混乱してしまうのは最初だけで、しっかり勉強していけば大丈夫だと思っています。

 

というわけでアデュー。

 

30分くらいだったと思う。