ヘッダー部分がスクロールすると、ついてくるナビゲーションに変化するアイディア

WS003019
このエントリーをはてなブックマークに追加
PR

 A Pen by Paul Howarth

nav2

DEMO 表示

 

通常の画像とロゴのヘッダーに見えたのが、スクロールをトリガーにヘッダーの画像をそのまま利用したナビゲーションに変化するアイディアです。

コードはHTML、CSS、javascriptで出来ています。
同じような仕組みをjQueryを使えば、javascriptが苦手な人でも実装しやすいかなと

最近は、スクロールと連動してナビゲーションのサイズが変化して、ついてくというのが流行っていますが、こちらの方はインパクトがありますね、WEBサイトにアクセントを付けたいという方は参考にしてみてはいかがでしょうか。

背景画像はレスポンシブにちゃんと対応出来ていないので若干修正したほうがいいかなとは思います

 

コードをダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)