今日は、就職活動の対策を行いながら
html/css/JavaScriptの練習を行いました。
サイトで検索したコードを実際に書いて
どこがどのように作用しているのか理解して、
一部自身で変更を加えました。
<簡単なCSS内容の解説>
・デフォルト用に設定したクラスに以下のcssを記述
1. 透過度を「0」に設定。透明にする。（opacity: 0;）
2. 要素を左に100pxずらした位置に設定。（transform:translateX(-100px);）
3. 透過度と表示位置を1秒かけて変化。（transition:opacity 1s,transform 1s;）
・変更後用に設定したクラスに以下のcssを記述
1. 透過度を「1」に設定。透明にしない。（opacity: 1;）
2. 要素を元の位置に戻す。（transform: translate(0);）
<JavaScript内容の解説>
・以下の要領でJavaScriptを記述
1. フェードインさせる要素を取得。変数に代入する。
（const ●変数名● = document.querySelector('#●id名●');）
2. フェードインさせる処理を関数にする。
（function ●関数名●(){ -処理内容- }）
※他の要素にも使うので関数にする。
※「関数を記述」→「その後に処理する」。
このことから、俗に「コールバック関数」と呼ばれている。
-----コールバック関数の内容はここから------
3. 画面左上から1の要素の上部までの高さを取得。変数に代入する。
（const ●変数名● = ●1の変数名●.getBoundingClientRect().top;）
4. ブラウザの高さを取得。変数に代入する。
（const ●変数名● = window.innerHeight;）
5. 「要素が画面に表示された時」を条件分岐で判別。
※1が画面に表示された時、必ず「3の高さ < 4の高さ」という
シチュエーションになる。
（if (●3の変数● < ●4の変数●) {}）
-----if文の内容はここから------
6. 条件分岐の判断内容が正しい場合、
1のフェードインさせる要素を代入した変数にクラスを追加する。
※この追加するクラスには、変更後用のcssが既に設定されている。
※実質、cssを上書きする形となる。
(●1の変数●.classList.add('●変更後のクラス名●');)
7. 条件分岐の判断内容と違う場合、
1のフェードインさせる要素を代入した変数からクラスを削除する。
※変更後用のcssを削除する。
( }else{
●1の変数●.classList.remove('●変更後のクラス名●');})
-----if文はここまで------
-----コールバック関数もここまで------
10. 画面が表示された時もしくは、
スクロールされた時に要素をフェードインさせるイベントを設定する。
※フェードインさせたい要素が一番最初に表示されたページにあっても
イベントが発生するように、「'load'」と「'scloll'」の2つを記述する。
(window.addEventListener('load' || 'scroll',●コールバック関数名●);)
5の条件分岐の判断内容に関しては、
「3の画面左上から要素上部までの高さが一定の数値を下回っていなかったら」
という内容を「&& (AND)」で追加して、cssを少し調整すればフェードアウトの
仕様も追加できそうな気がしました。
しかしながら、構文内容をすべて上記のように文章で表現するのは、
より長い構文を書く時にどうしようかと新たな悩みが浮かびあがりました。
色々とまだ改善の余地がありそうです。
それでは、今日はこの辺で＾＾
Arrivederci. Buona serata.
（イタリア語で「さようなら。素敵な晩を。」）