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

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

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

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

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

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

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

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

ズームとフェード、そしてスティッキーを組み合わせたヘッダ。エフェクトが多いと一見うるさそうですが、実際に見てみると自然で気持ちいいエフェクトです。

こちらはJSを使用せず、CSSのみで実装されたパララックスのヘッダ。

フェードさせるだけのシンプルなエフェクトが美しいヘッダ。

ここからは、矩形ではないヘッダを紹介します。

最近では、こういったかっこいいアニメーションを使用したヘッダも増えてきました。

CSS Gridを使用した、複雑なレイアウトのヘッダ。

SVGの曲線を使用したヘッダ。スクロールすると、アニメーションします。

区切り線を斜めにするだけでも新鮮ですね。

::before疑似要素を使い、斜め線をスティッキーにしています。

ここからは、スティッキータイプのヘッダ。
パララックスやタイトルの配置変更が使用されており、実用性が非常に高いと思います。

スクロールすると、上部から覆い被さるようにスティッキーが表示されます。

デフォルトで表示されていたナビゲーションだけがスティッキーするヘッダ。

JavaScript無しで、レスポンシブ対応のスティッキーが実装されたヘッダ。