【プログラミング独学day48】CSS設計BEM、jQuery パララックス効果

HTML/CSS

プログラミング独学day48。学習で得たことや気づきを教えて!

今日は
・CSS設計のBEM

・jQuery パララックス効果のスライド

をアウトプットします!

 

 

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜0時に独学しています!

 

→プログラミング学習day48、もりけん塾day4

 

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

CSS設計 〜BEM〜

「CSS設計の教科書3-4 BEM」を学習しました。

 

BEMとは?

 

コンポーネント設計をするためのアイディア5つ、のうちの1つ。

 

 

OOCSS、SMACSSについては→過去記事 d45

 

BEMは、初心者のわたしでもよく聞く!使えるようになりたい。なります。

 

概要は以下のとおり。

 

ヘッダー、ナビゲーション、フォーム、フッターなどがBlockにあたります。

たとえば、フォームBlockの中に「検索窓」と「ボタン」があります。これをそれぞれElementとよびます。子要素みたいな感じ。

要素の状態をあらわす、たとえばボタンの色なんかがModifierにあたります。

 

BEMの書き方

 

基本の書き方は、

Block_ _Element- -Modifier

 

BlockとElementをアンダースコア2つでつないで、ElementとModifierをハイフン2つでつなぎます。書き方に違和感があるって人や企業は、独自にルールを設定してカスタマイズしているよう。

 

 jQuery パララックス効果を使ったスライド

 

次に、jQueryの実装練習のアウトプットです。今回は、パララックス効果といわれる視差効果を背景画像に使ったアニメーションに挑戦です。

 

完成物

 

こんな感じで、スライドの背景(3枚重なってる)をそれぞれ違うスピードで動かして、奥行きをつけていきます。

 

構成の考え方

 

jQueryを組む時には、最初に構成を考えます。

 

①ボタンをクリック
②スライドが動いて、コンテンツが移動
③背景画像が移動
④ボタンのスタイルを変更
こんな感じで実装していきます。

構成① ボタンをクリック

 

.click()メソッドを使用。中に、クリックしたときの内容を関数で書いていきます。セレクタの$("a")は、スライドボタン。

 

aに指定されているhref="#"に飛ばないように、return false;します

 

構成② スライドが動いて、コンテンツが移動

 

「クリックするボタンのテキスト番号」を取得してdisという変数に代入します

なぜ、-1するのかは、次の6-7行目の計算式でわかります

6-7行目でスライドを動かしていきます。

 

4つあるコンテンツのなかで、n番目のコンテンツに移動する場合

移動量:(ボタン番号 -1) * -700
で移動量を計算できます。
この-1が変数disに入っています。

なぜ、-700するの?

(画像引用:jQuery標準デザイン講座)

この図のように、4枚のスライドはfloatで横並びになっている。
700pxをはみ出る分は、overflow: hidden;で隠されている。


#section を左に-700pxずつしていくことで、スライドが動く!

構成③ 背景画像が移動

 

ここでのポイントは2つ。

① animate()メソッドでは、背景画像にアニメーションつけられない
② css()メソッドを使って動かす
ここつまずいたから、くわしくまとめる。

CSS()メソッドを使って、背景画像にアニメーションをつける

 

重なっている3枚の背景画像を、それぞれ動かします。

 

あらかじめCSSでtransition設定しておく→jQueryで移動する位置のみ設定
CSS
body, #bg1 , #bg2 それぞれに
transition:background .3s;
が設定されています。
これは、「backgroundが変化する時の時間」を表したもの。
次に、jQuery css()メソッドで背景画像を動かす。
css()メソッドで、
cssのbackground-position プロパティを変更 = 背景画像の位置を変える
3枚の画像を、それぞれ違う値で動かします。パララックス効果!

構成④ ボタンのスタイルを変更

最後に、クリックするボタンスタイルを変更していきます。
→4つあるボタンのうち、今クリックしているものの色を変える
currentというクラスをつけ外しすることで、色が変わるようにする
→事前にCSSでli a.current{background-color: ~}を設定しておきます
これで完成です。

あとがき

 

jQueryの書籍「jQuery標準デザイン講座」30レッスン中、16レッスンまで終了。やっっっと半分です(;´д`)簡単〜むずかしいレベルの順に並んでいるので、だんだんスピードダウンしてきてます;

しかし、暗記するのではなく「jQueryの構成の組み立て方を学ぶ」という姿勢で、そこを丁寧にやっていきます。

 

*今日の工夫*

・日中のスキマ時間に、BEMの解説youtubeをみて予習した。

→日中、全くPCや本を開けないので、ちょっとしたスキマ学習を大切にしていく。

 

今日は以上です。

 

Thanks:もりけんさん(@terrace_tec)

もりけんさんのHPはこちら→ 武骨日記

 

タイトルとURLをコピーしました