有名サイトで多数導入!ふわっと縮む固定ヘッダのjquery

Learning jQuery

今日はヘッダをおしゃれに固定できるjqueryのご紹介!

ヘッダを固定する方法はいくつかありますが、個人的には今日紹介するjqueryが動作的には気持ちがよくしっくりきます。

サイトにアクセントが欲しい方は導入を検討してみてはいかがでしょうか。

それでは設定方法について説明していきます。

まずはDEMOをご覧下さい。
DEMO

似たようなヘッダを導入されているサイトはこちらです。

muuuuuさん

ハウス ウェルネスフーズさん

 
実装方法についてはcodropさんサイトの記事を参考にさせて頂きました。(英語です)

codropさんの記事

まずはcodropさんのサイト『DOUNLOAD SOURCE』から『AnimatedHeader.zip』というファイルをダウンロードして下さい。

フォルダに入っているcssとjsフォルダ、index.htmlをサーバーにアップすればひとまず動きます。

jsフォルダに『cbpAnimatedHeader.js』と『cbpAnimatedHeader.min.js』が入っていますが、どちらか一方だけでOKです。

あとはhtmlとcssをdemoの様に必要な形にアレンジしてあげれば、うまく実装できるので是非試してみて下さい。

Sponsored Link

コメントを残す