Month: 2018年1月

以前「ページ内リンクのスムーススクロールのベスト（2017年9月現在）な実装を考える」という記事を書いたのですが、
この記事の中では当たり前のようにjQueryを使用していました。

アニメーションさせるならjQueryを使った方が楽、という思い込みから、jQueryを使わないという事を検討すらしていませんでした。

しかし改めて考えてみると、徐々に古いIEに対応しなくて良くなってきた昨今、最近のJavaScriptの便利なメソッドも使えるようになってきているので、実はプレーンなJavaScriptでもシンプルに実装できるんじゃないかと思い、色々と試してみました。

やはりjQueryは便利に作られているなと実感しつつも、機能を絞ればプレーンなJavaScriptでもまあまあシンプルに書ける事がわかりましたので、紹介したいと思います。

IE10以下の動作確認はしていません。

画面をスクロールして、要素が画面内に入ったらフワッと表示させるという、制作者側からしたら見飽きたけどクライアント側からは依然人気の高い例のアレ。

実は簡単に実装できるので、今まではその都度、状況に合わせてCSSとJSを書いていたのですが、
最近になって大体の要望や状況のパターンが掴めてきたので、汎用的なスクリプトを用意して毎回コピペで何とかできないものかと考えてみました。

色々試した所、今まで面倒くさがってjQueryで書いていたんですが、実は普通にJavaScriptで書いた方が簡単という事を知りました。

ですので、プレーンなJavaScript、CSS、HTMLのコードで紹介していきたいと思います。