ブログや更新コンテンツを埋め込む際に必要になってくるのがページ送り(ページャー・ページネイション)。
最近はシンプルなデザインが流行っている傾向にありますが、シンプル故にページ送りのような部分はどうしても毎回同じようなデザインになってしまいがち。
そこで今回は30種類以上のページ送り(ページャー・ページネイション)のデザインCSSをご紹介します。
コピペで簡単に導入も出来るのでぜひデザインの参考にしてみてください。
パックマンがページャーを食べるアニメーションページャー(ページネーション)
See the Pen
Pac-Man CSS Pagination by Paraskevas Dinakis (@perry_nt)
on CodePen.
クリックでコンテンツごと動くアニメーションページャー(ページネーション)
See the Pen
Pagination Pure CSS by Henrique Rodrigues (@hjdesigner)
on CodePen.
クリックで円が移動するアニメーションページャー(ページネーション)
See the Pen
Pacman pagination by Mikael Ainalem (@ainalem)
on CodePen.
クリックで円が移動するアニメーションページャー(ページネーション)2
See the Pen
Pagination by JP Nothard (@Funsella)
on CodePen.
クリックで円が移動するアニメーションページャー(ページネーション)3
See the Pen
Infinite Pagination by Mariusz Dabrowski (@MarioD)
on CodePen.
クリックで円が移動するアニメーションページャー(ページネーション)4
See the Pen
SVG Page Hopper by Chris Gannon (@chrisgannon)
on CodePen.
クリックで円が移動するアニメーションページャー(ページネーション)5
See the Pen
Dot Hopper – Pagination by Elliot Geno (@pyrografix)
on CodePen.
クリックでボタンサイズが変わるページャー(ページネーション)
See the Pen
Pagination Buttons (Pure CSS) by MARK (@defaultclass)
on CodePen.
インジケータ風ページャー(ページネーション)
See the Pen
pagination indicators by Moses Holmström (@thykka)
on CodePen.
ウィンドウサイズに合わせて表示数が変わるページャー(ページネーション)
See the Pen
Pagination, pager by Elmira Mukhamedjanova (@ElmiraMukhamedjanova)
on CodePen.
ウィンドウサイズに合わせて表示数が変わるページャー(ページネーション)2
See the Pen
responsive pagination by Milica (@micadev)
on CodePen.
クリックで文字が表示されるページャー(ページネーション)
See the Pen
Roman Pagination by Michael Sveistrup (@faffelkugel)
on CodePen.
ホバーで下線が動くアニメーションページャー(ページネーション)
See the Pen
Line Pagination with Hover (PureCSS) by MARK (@defaultclass)
on CodePen.
ホバーで遷移リンクが浮かび上がるアニメーションページャー(ページネーション)
See the Pen
pagination hover animation by Elena Nazarova (@nazarelen)
on CodePen.
縦向きアニメーションページャー(ページネーション)
See the Pen
CSS Line Follow Pagination by MARK (@defaultclass)
on CodePen.
動く矢印を使ったアニメーションページャー(ページネーション)
See the Pen
Flexing pagination arrows by Hakim El Hattab (@hakimel)
on CodePen.
6種のページャーデザイン
See the Pen
Pagination with CSS Custom Properties by Stas Melnikov (@melnik909)
on CodePen.
12種のシンプルなページャーデザイン
See the Pen
Pagination by Rosa (@RRoberts)
on CodePen.
シンプルなページャー(ページネーション)
See the Pen
Pagination by Robert (@robertcooper_rc)
on CodePen.
円形ページャー(ページネーション)
See the Pen
Roundie Pagination by ahmed beheiry (@ahmedbeheiry)
on CodePen.
