見出し画像
Photo by aoming

フェードインアニメーションに大苦戦

モリ

～今日の積み上げ～

今日はこの目標のもと、行いました。


昨日のハンバーガーメニュー完璧に

昨日の理解は正直あやふやだったので、もう一度復習。
importantとは、優先的に適用される記述。
きちんと理解出来ました。

<body>
   <!-- ♨ -->
   <input id="menu" type="checkbox" >
   <label for="menu" class="open">♨</label>
   <label for="menu" class="back"></label>
   <!-- ♨ -->
   
   <aside>
       <!-- ♨ -->
       <label for="menu" class="close">×</label>
       <!-- ♨ -->
       <nav>
           <ul>
               <li>List1</li>
               <li>List2</li>
               <li>List3</li>
               <li>List4</li>
               <li>List5</li>
           </ul>
       </nav>
       <div>side footer</div>
   </aside>
   <main>main</main>
</body>
   //チェックが入ってたら、チェックボックス要素後のasideが
　 //予め左に-200pxで隠していた要素を表示させる。
   input[type="checkbox"]:checked ~ aside {
       left: 0;
   }
   
   
   //チェックが入ってたら、チェックボックス要素後のbackクラスラベルが
　 //aside以外の全体に広がり、暗くしている。
   input[type="checkbox"]:checked ~ .back {
       position: absolute;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.5) !important;
   }

こちらのサイトも参考になりました。
transitionについてです。


フェードインアニメーション実装できるように

これは割とどのサイトでもよく見るので、習得しておきたいと思っていたもの。
少しなめてましたがこれ、結構難しい。
サイトを見ながら再現出来たので今後「必要になったら使い回し」でいいような気もしますが、理解しないで放棄するよりはした方がいと思ってるし、何より悔しい。

こちらのサイトを参考に練習しました。


上記のサイトについて、解説してくれているのがこの方。​


ですがコードで、何をしているかが分からなかったので、こちらを確認。
しかし、これでも閃かず。


こちらでなんとな～くのイメージが出来たものの、実際ちょっと違うので閃かず。


jQueryだともう少し簡単に実装出来るみたいなのですが、「今後jQueryは流行らなくなるであろう」的な記事を見たことがあり、なるべくJavaScriptでの実装を理解したいという、変なこだわり。

//fadeInTargetに、HTMLのfade-inクラスを格納。
let fadeInTarget = document.querySelectorAll('.fade-in');

window.addEventListener('scroll', () => { //スクロールという名のイベントが発生したら
 for (let i = 0; i < fadeInTarget.length; i++){ //fade-inクラスの数だけループ
   
   //表示領域最上部～要素までの距離を求める。
   //要素が表示領域最上部にくっついたら0。
   const rect = fadeInTarget[i].getBoundingClientRect().top;
   
   //サイトの最上部～表示領域最上部。
   //最上部からどれだけスクロールしたかを数字で返す。
   const scroll = window.pageYOffset || document.documentElement.scrollTop;
   
   //rectは要素が表示領域最上部にくっついたら0。
   //つまり、少しでも表示されたら
   const offset = rect + scroll;
   
   //innerHeightは表示領域の高さを求める。お使いのモニタによって、という感じ。
   const windowHeight = window.innerHeight;
   
   //「要素の頭が表示された時の数字-モニタの高さ+150」が
   //サイトの最上部～表示領域最上部の数字より小さかったら
   if (scroll > offset - windowHeight + 150) {
     fadeInTarget[i].classList.add('scroll-in');
   }
   
 }
});

※上記、あまり理解せずに書いてます。これも記録です。
何時間も考えたあげく、結局ロジックを理解できず。
悔しいけど、時間は有限。
コピペで使える状態なので、今後も先人の知恵をお借りする事にします。


という事で、今日もWordPress学習は出来ず。
でも僕にしては頑張りました。
決してムダでは無いと思います。

明日も切り替えて頑張ります。
ツイートにもある通り、今日は早いですが寝ます。
最近若干寝不足なので。それではおやすみなさい。

この記事が気に入ったらサポートをしてみませんか？