以前「ページ内リンクのスムーススクロールのベスト（2017年9月現在）な実装を考える」という記事を書いたのですが、
この記事の中では当たり前のようにjQueryを使用していました。
アニメーションさせるならjQueryを使った方が楽、という思い込みから、jQueryを使わないという事を検討すらしていませんでした。
しかし改めて考えてみると、徐々に古いIEに対応しなくて良くなってきた昨今、最近のJavaScriptの便利なメソッドも使えるようになってきているので、実はプレーンなJavaScriptでもシンプルに実装できるんじゃないかと思い、色々と試してみました。
やはりjQueryは便利に作られているなと実感しつつも、機能を絞ればプレーンなJavaScriptでもまあまあシンプルに書ける事がわかりましたので、紹介したいと思います。
IE10以下の動作確認はしていません。
画面をスクロールして、要素が画面内に入ったらフワッと表示させるという、制作者側からしたら見飽きたけどクライアント側からは依然人気の高い例のアレ。
実は簡単に実装できるので、今まではその都度、状況に合わせてCSSとJSを書いていたのですが、
最近になって大体の要望や状況のパターンが掴めてきたので、汎用的なスクリプトを用意して毎回コピペで何とかできないものかと考えてみました。
色々試した所、今まで面倒くさがってjQueryで書いていたんですが、実は普通にJavaScriptで書いた方が簡単という事を知りました。
ですので、プレーンなJavaScript、CSS、HTMLのコードで紹介していきたいと思います。
名前も忘れた日本製のスマホ → Nexus 5 → Nexus 5X と、約2年ごとにスマホを買い替えてきたのですが、 日本製のスマホからNexus 5に買い替えた時の感動が大きすぎて、もう一生Nexusシリーズで良いと思っていました。 無駄なものが入りまくりで、不具合が多かった日本製のスマホにストレスを感じまくっていた私にとって、オフィシャルでプレーンで常に最新OSが使えて見た目もシンプルで素敵なNexusシリーズは最高のスマホでした。 しかし、Nexusシリーズが終了し、期待のPixelシリーズも一向に日本で発売されないという悲劇に見舞われ、ついにGoogle公式スマホから卒業しなければい […]