イケてる「ページトップへ戻る」ボタンサイトを集めてみた
- 2014/08/07
- タムラ
最近は応援してるJリーグサッカーチームが
好調で喜びのあまりお酒が止まらないタムラです。
そして、夏になると音楽フェスに海にBBQに楽しみが尽きないですね。
年甲斐なく焼けてしまうので今年から日焼け止めをぬりたくってます。
(可愛い日傘があれば購入を検討中)
今回はかわいいページトップのうごきや
おもしろいもの、デザインテイストが素敵なものなどを紹介したいと思います。
ページの上部に戻るタイミングでアニメーションっぽい表現
ページトップ(back to top)ボタンをクリックした後にアニメーションっぽく表現される3サイト紹介します。
1.webleeddesign http://www.webleeddesign.com/
2.janploch http://www.janploch.de/
TOPに戻るタイミングで水が満タンになっていくアニメーションがとても可愛いです。
3.More Hazards More Heroe http://morehazards.com/
ページトップに戻ってる途中に背景のフワってする動きが素敵です。
動きが凝っている
ボタンを押した時の動きが面白いサイト5サイト紹介します。
1.株式会社LIG http://liginc.co.jp/
とっても激しく動きます。こだわりまくってます!一瞬しか表示されない広告枠をなんとしてもクリックしたくなりますね。面白い発想です。
2.エアリーカールマスカラ スーパーフィルム http://www.isehan.co.jp/heroine/superfilm_mascara/
3.ロマンシング佐賀 http://romasaga.jp/
サイトもとてもおもしろいのですがページトップボタンを押した時の動きにびっくりします。footer付近の火のアイコンをクリックしてみてください。全力でページトップへ戻ります!
4.東京スカイツリー TOKYO SKYTREE http://www.tokyo-skytree.jp/
ソラカラちゃんと一緒にスカイツリーを登るようにしてページトップします。かわいい!!
5.JTB 女子旅つくるプロジェクト http://jtpj.jp/
ページTOPのボタンが滑走路になってますね。さすがJTB。面白いのでぜひ見てみて下さい。
ギャグが織り交ざってる
ギャグっぽい上の戻るボタンをおいているサイト3サイト紹介します。
斬新なPAGE TOPボタンです。
1.分かりすぎて困る!頭の悪い人向けの保険入門 http://hokensc.jp/kikaku/atama_warui.html
バーグハンバーグバーグが制作されてる、とっても保険のことが学べるサイト←
ページトップボタンにちょっとイラッとします(笑)
2.Mutations Studio http://www.mutationsltd.com/
したまでスクロールすると宝箱を発見できます。その中空ページトップボタンを発見できればいいのですが・・・・
3.オモコロ あたまゆるゆるインターネット http://omocoro.jp/
動きが斬新すぎる!さすがバーグハンバーグバーグ!!!
デザインが凝っている
デザインが可愛いサイトを紹介します。キャラクター使用していたり、サイトコンセプトにマッチしているページトップボタンをみると「おっ!」っと思いますね。
ちょっとした動きをつけたりデザイン性を持たせることでさらにこだわったサイト作りができるのではないでしょうか??
- Pulpfingers http://pulpfingers.com/
- マウントパジャマンド http://mt-pajamand.com/
- 倉敷芸術科学大学情報発信サイト 「つなぐ」http://www.alumni-kusa.jp/
- マクロビオティックとオーガニックエコ食材セレクト通販GAIAネット http://gaia-ochanomizu.co.jp/shop/
- からあげクン王国|ローソン http://karaagekun.lawson.jp/page.html#kentei/
- 株式会社博報堂DYインターソリューションズ http://www.hakuhodody-inter.co.jp/
- MONSTER baSH 2014 http://www.monsterbash.jp/
動きを実装できる参考プラグイン
- 【jQuery】スクロールすると現れるページトップへボタンの設置方法
- 10 jQuery ‘Back to Top’ link Solutions for Websites
- Creative Back to Top Button with jQuery Effect
どうでしたでしょうか?デザイナーさんがコーディング部隊に依頼するときに参考サイトのような動きを指示してあげてもいいですね。
一部に動きやちょっとした遊び心を見せてあげることでより楽しいサイトがつくれますね★
多いのはスクロールしたら固定位置に表示させてあげるようなサイトがとても多かったですよー!