コーディングの依頼で良くお願いされる事

コーディングのお仕事を40件近く担当して、依頼内容で多いものをご紹介します。

スクロールで画像等の要素が表示されたらふわっと表示させる

色々なサイトでも良く見ますね。

実装方法はいろいろ考えられると思いますが、私はJavaScriptの「Intersection Observer」を使います。

JavsScriptならscrollイベントなどでも実装するのですかね。

ご依頼主様からは、処理が重くなる心配をされる方もいますが、重くなる事はないと思います。

要素が画面内に入ったら、Intersection Observerでclassを付けて、CSSで処理させるので、実装もしやすいと思います。

---

バーガーボタンクリックでスマホメニュー表示

バーガーボタンはCSSで作るのですが、私としては、CSSが少し複雑ですね。

before疑似要素、after疑似要素を使って作ります。

気を付けているのが、スマホメニューを透過で表示させたときに、メニューを操作に連動して、下層のコンテンツが動いてしまうこと。

bodyにposition:flexd;overflow:hidden;width:100%の指定で防げると思います。

バーガーボタンクリックで×ぼたんに変形させるのに、transformを使います。

Intersection Observerは覚えておいて損はないと思います。

---

お仕事募集中ですのでよろしくお願いいたします。