UPDATE:2016.9.6
- CATEGORY
スマホサイトで使いたいjQueryプラグイン
こんにちは、アプリコットデザインのざっきーです。今回はスマホサイトでよく見かけるスクロールするとスライドして現れるヘッダー機能を実装するためのプラグインを紹介したいと思います。
jquery.cb-slideheader.js
スマホサイトを開いたときファーストビューの時点ではデザイン上、ある程度ヘッダーの高さが欲しいけれど下に読み進めていくと固定ヘッダーの高さが気になってしまうことってありますよね。jquery.cb-slideheader.jsはそんな時に簡単に実装できて調整ができるjQueryプラグインなんです。
プラグインはGitHubからダウンロードできます。
このプラグインの使いやすい点としてはヘッダーの表示/非表示に関するオプションとスタイルやアニメーションオプションの充実があげられるでしょうか。
プラグインのオプションにboxShadowやopacityなどが用意されているためスライド後に出現するヘッダーのデザイン調整に非常に役立ちます。CSSと同様の記述で調整できるとのことなので非常に扱いやすいです。
あと、まだ試してはいないのですがコールバック関数も使えるため、スライドしたら特定の要素をアニメーションさせるといったことも可能なようです。奥が深い!
動作も軽く、オプションも充実しているのでお試しください。