2018年02月2日(金)

最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ

• 0
• 103
• 237
• 399

ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。

スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがスティッキーになったり、実用的なアイデアが満載です。

各デモは「Run Pen」をクリックすると、動作します。

まずは、スクロールすると、ヒーローイメージがズームするヘッダ。
HTMLは非常にシンプルで、CSSもJSもシンプルなので、コピペで簡単に利用できます。

今度は逆に、ヒーローイメージがフェードアウトするヘッダ。

ヒーローイメージをパララックスさせるのも面白い効果が得られます。

パララックスのエフェクトに、スティッキーを加えたヘッダ。

...