【jquery】ユーザビリティをよくするサンプルコードまとめ

制作現場では決まって時間がない。
だから決まって使うソースコードは使いまわしたいですよね。

コピペで使える便利なコードを、役割別にまとめました。

今後もどんどん追加していくので、ブックマークとしておくと困った時に役に立つかも。

コードばかりでページが長くなってしまっているので、目次から先にチェックしてください。

スムーススクロール

ページ内リンクをするするする、スムーススクロールの実装。
現場で絶対必要になるやつです。

これだけ。

スティッキースクロール

これは.stickyという要素を通り過ぎた地点から、ページの上部で固定されて、以降付いてくるものです。
現場で追従するやつって呼ばれます。

.stickyがある地点に到達したと同時に、.is-fixedというclassを付与します。
最近ではCSSだけでできるようになりつつあるみたいで、早くIEブラウザ消えてなくならないかなって思っています。

するするトップへ戻るボタン

スクロールすると現れて×で消せるバナー

Pjaxでページ遷移をシームレスにする

ページ遷移をスムーズにし、画面を切り替えずにページ遷移をする。
非同期通信と言われるやつです。

あまりにも切り替わるのが早いと、ページが切り替わったことさえわからなくなり、かえってユーザーを惑わせるので、アニメーションをつけると親切ですね。

参考:プログラムデザイナーへの道

http://program-designer.xyz/pjax/

まずはPjaxをダウンロードしてheadに記述しましょう。

http://falsandtru.github.io/pjax-api/

クラスで出し分けするグリッドレイアウト用SCSS

イージング用の変数のSCSS

まだまだ生きてるjquery

巷ではjavascriptのフレームワークとして、vue.jsが熱いみたいですね。

こちらを購入したので、どんどん僕も勉強します。

別々のファイルにして必要に応じて読み込むと使い勝手がいいです。

ほなね