プログラミング復習帳〜その3〜

 

この記事はweb制作を学んでいる際に、自分が調べて学べたことや、メンターさんに指導をもらったことを自分の復習としてまとめています。

Progateをやった後や、コーディングで悩んだ方の参考になれば嬉しいです。

また、他の方のブログ記事をたくさん記載させて頂いています。
いつも参考にさせていただいており、感謝いたします!!

学習中であり不完全なところも多くありますので、気になる所があれば先輩方にアドバイスをいただけると嬉しいです!

今回はアニメーションやホバーエフェクト、初めて使ったjQueryなどコピペでできるものを中心にまとめていきます!

 

〜復習帳その3〜

実は jQueryはほとんど勉強したことがなく…
Progateの無料でできるところをやっただけです。
それでも使えてしまうのが、ネット社会のいいところですね!
色々とサイトにまとめてくださっている皆様ありがとうございます!

ハンバーガーメニューの定番Drawer!

本当にコピペだけで簡単にハンバーガーメニューが作れてしまう魔法のサイトです↓

https://git.blivesta.com/drawer/

使い方や見た目のカスタマイズの仕方はこちらを参考にしました!

https://www.misallychan.com/entry/2017/07/27/070000

Drawer(drawer.js)の見た目をカスタマイズするCSSの書き方

drawer.jsでページ内リンク時をクリック時にメニューを閉じるようにする

またメンターさんからこのDrawerを教えていただいたのですが、課題の中のハンバーガーメニューは、メニューを開いた後に3本線の内、1本がMENUの文字に、残り2本が×になるデザインになっていました…

jQueryをほとんど理解していない私はここでつまづいてしまいましたが…
なんとか解決することができました。

元々、このDrawerは真ん中の線が元となり、擬似要素before、afterで上下に線を加えられています。

デベロッパーツールと何時間もにらめっこをした結果、
元々drawer-hamburger-iconについているbefore afterをdisplay:noneにして、
自分で新しく
drawer-hamburger-icon-before、
drawer-hamburger-icon-after
のクラスを作り×を作ることに成功しました!!

その際にJavaScriptもいじらないといけなかったため、こちらの記事を参考にしJavaScriptを書いていきました。

【jQuery】メニューが横からスライドして表示される[Drawer]の使い方。

途中で、「これはDrawer使わず自分でなんとかハンバーガーメニュー作った方がよかったのでは…」
なんて思いましたが、無事に解決できて嬉しかったです(*´∇`*)

次はDrawerを使わずとも自分でコードが書けるように勉強を進めていきたいですね!

 

スクロールに合わせてアニメーションを実施!

フェードインやフワッとコンテンツが出てくるようなやつはcssのアニメーションで実装できるのですが、今回はスクロールをした際にアニメーションが実施されるように調べてみました。

せっかくアニメーションをつけているのに、そのページにたどり着く前に終わってしまっていたら見れないですもんね…(*_*)

https://www.weblab.co.jp/staff/creator/6148.html

これでスクロール時にアニメションが実施されるようになりました!
どんなアニメーションをつけるか考えるのもワクワクしますよね!

 

ちなみに、フェードインはこちらを参考にしました↓

https://gatch.site/css-fadein-animation/

また、こちらの記事もよく参考にさせていただいています!

【保存版】CSSアニメーションの種類・使い方・サンプル

 

 

今回は、このあたりで…

最後まで読んでいただきありがとうございました!

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です