5509

めくる感覚で行き来できるページナビゲーションをCSSで実装する

ページナビゲーションが表示された状態のキャプチャ

要らないものを削った結果、記事が縦に長くなってしまうもんで、ページナビゲーション(前の記事、次の記事リンク)をどうしようかなぁとか思ってた。

ちょうど、シロさん(@___shiro_)がのを見て、なーるほどと思い実装してみた。

こういったレイアウトのアーカイブのナビゲーションで、元のHTMLを一切触らずCSSだけで飛躍的に(?)ユーザビリティを高められるいい例になったかなぁ。どうやろ。その辺は要検証ということで。少なくとも自分で使う分には超使いやすいからこれはこれでオッケーなんですけども。

Read more

スライドスクロールページ内リンク slideScroll.js (jQuery非依存)

先日のjQuery.slideScroll.jsでjQuery無しでも動くようにしてほしいと要望があったので
jQueryなしの単体で動作するように微妙に書きなおしました。

こちらはアンカーの指定は出来ずにすべてのページ内リンクに対して動作しますので
タブとかがあるとそこの動きはおかしくなります。タブも使う場合はjQuery依存のほうを使ってください…

slideScroll.jsのサンプルを見る

Read more

スライドスクロールページ内リンク jQuery.slideScroll.js

memo: Easingプラグインで実現するスクロールの方がきれいにスクロールできるのでおすすめです。

jQuery.slideScroll.jsはよくあるページ内リンクをスクロールさせるやつです。
スクリプト内でjQueryはほとんど使ってなくてjQueryプラグインな必要もあんまりない感じですが
アンカーの指定がし易いのと僕がjQueryを99%使ってるのとでjQueryプラグインになってます(*1

*1) jQuery非依存版もあります

スクロール型のページ内リンクは
僕がJavaScriptをやってみようと思ったきっかけでもあって いつか自作できたらいいなぁと思ってたのでした。

jQuery.slideScroll.jsのサンプルを見る
5509でも読み込むようにしたのでサイト中のページ内リンクでも確認できます。
(トピックスがページ内リンクになってるのでそこで確認できます。)
現在はeasingScrollを使っています。

Read more

Author

nori
nori
- UI Engineer
Location
- ,