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

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

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

デモのキャプチャ


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

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

See the Pen Hero Zoom on Scroll by Derek Palladino (@derekjp) on CodePen.

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

See the Pen Hero Image Showcase by Art (@Skupienski) on CodePen.

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

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

See the Pen Neat Parallax Hero Effect by Dominic Magnifico (@magnificode) on CodePen.

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

See the Pen Hero idea by Jake Lundberg (@iamtheWraith) on CodePen.

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

See the Pen Pure css Parallax header by keisuke Takahashi (@ksksoft) on CodePen.

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

See the Pen Hero effect–Magazine by Cameron Campbell (@cdcampbell26) on CodePen.

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

See the Pen Header Experiment by Paraskevas Ntinakis (@perry_nt) on CodePen.

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

See the Pen Sexy Animated Rainbow Waves Header by Jeffrey Bennett (@PickJBennett) on CodePen.

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

See the Pen The Critical Request header by Chen Hui Jing (@huijing) on CodePen.

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

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

See the Pen Slanted Div, Fixed Header by Andrew Bales (@agbales) on CodePen.

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

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

See the Pen Scroll Header by Blake Bowen (@osublake) on CodePen.

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

See the Pen Responsive sticky header navigation by MarcLibunao (@MarcRay) on CodePen.

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

See the Pen Sticky Header CSS Transition by Brady Sammons (@soulrider911) on CodePen.

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

See the Pen Responsive Scrolling Sticky Header by Tommy Hodgins (@tomhodgins) on CodePen.

sponsors

top of page

©2018 coliss