ウェブサイトを訪れたとき、まずユーザーが目にする「ヘッダー」部分は、魅力的なデザインコンセプトを取り入れることで、オリジナル性の高い表現が可能になります。
今回は、魅力的なヘッダー/フッターデザインを実装できる、コピペ可能なHTML/CSSスニペット48個をまとめてご紹介します。ブログ記事向けレイアウトやランディングページ向けなど、5つのカテゴリに分けています。用途に応じて最先端のWebデザインテクニックを活用し、デザインの参考にしてみてはいかがでしょう。
コンテンツ目次
- 1. 記事向けヘッダーデザイン
- 2. 記事向けフルスクリーン・ヘッダーデザイン
- 3. 固定ヘッダーデザイン
- 4. フッターデザイン
- 5. ビデオヘッダーデザイン
記事向けヘッダーデザイン
ヘッダー背景をスクロールに合わせてフェードアウトさせるCSSテクニック。
See the Pen CSS Animated Header by Nodws (@nodws) on CodePen.
斜めに入ったスリットラインが印象的なレイアウトで、こちらもCSSのみでスタイリング可能です。
See the Pen Slanted Div, Fixed Header by Andrew Bales (@agbales) on CodePen.
Fixed Disappearing Scrolling Header
見出しタイトル部分が写真の山並みに隠れる、ユニークなパララックスエフェクトを実現できます。
See the Pen Fixed Disappearing Scrolling Header by Dudley Storey (@dudleystorey) on CodePen.
Multi-Layered Parallax Illustatrion
イラストを何層にも分けることで、奥行き感をたっぷりのパララックスエフェクトを実現します。モバイル端末ではエフェクトは適用なし。
See the Pen Multi-layered Parallax Illustration by Patryk Zabielski (@zabielski) on CodePen.
Parallax Scene with CSS Variables
こちらも上記スニペットと同様のアニメーションテクニックが披露されています。
See the Pen Parallax scene with CSS variables by Tobias Reich (@electerious) on CodePen.
ランディングページなど他より目立たせたいときに確認したい、プランクトンのようなアニメーションが魅力的。
See the Pen PLANKTON – Particles life by Marco Dell’Anna (@plasm) on CodePen.
スクロールに合わせて画像が滑らかにズームアップするテクニック。
See the Pen Hero idea by Jake Lundberg (@iamtheWraith) on CodePen.
Headings / Hero Image Typography Playground
タイポグラフィを活用した、10種類のヘッダーイメージの実践的なサンプル集。
See the Pen Headings/Hero image typography playground by Mirko Zorić (@fluxus) on CodePen.
こちらもスクロールスピードに合わせてズーム付きのパララックス機能を調整できます。
See the Pen Hero Zoom on Scroll by Derek Palladino (@derekjp) on CodePen.
スクロールすると画像がフェードアウトをはじめ、見出しタイトルのみ固定されるテクニック。
See the Pen Neat Parallax Hero Effect by Dominic Magnifico (@magnificode) on CodePen.
Instagramアプリなどで利用されているテクニックのひとつで、スクロールに応じてヘッダー部分のみ固定される仕組み。
See the Pen Fixed Post Header by White Wolf Wizard (@WhiteWolfWizard) on CodePen.
CSSのみで表現されたお手軽なパララックスエフェクトで、滑らかさも自由に調整できるのでテンプレートとしても最適。
See the Pen CSS Parallax Header Image by Bennett Feely (@bennettfeely) on CodePen.
記事向けフルスクリーン・ヘッダーデザイン
スクロールすると全画面表示された写真がふわりと奥に消えていく、スタイリッシュなデザインエフェクト。
See the Pen Hero Image Showcase by Art (@Skupienski) on CodePen.
ウェブマガジンのトップページを想定したレイアウトで、ふわりと出現する見出しタイトルや画像のフェードアウトなど、ミニマルな魅せ方が素敵。
See the Pen Hero effect–Magazine by Cameron Campbell (@cdcampbell26) on CodePen.
Flexboxプロパティを利用することで、どんな画面サイズにもぴったり表示される画像を簡単に設定できるようになりました。
See the Pen Flexbox Hero Header by Ana Vicente (@anavicente) on CodePen.
フルスクリーンで表示した画像に、ブラウン管の砂嵐のようなグリッチエフェクトを追加します。
See the Pen GLSL Glitch by yoichi kobayashi (@ykob) on CodePen.
Full Page Parallax Scroll Effect
フルスクリーンで表示される画像をパララックス付きのスライドエフェクトで切り替えます。滑らかなコンテンツ遷移にも注目です。
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.
Webpage Hero Header – Scroll Effects
スクロールすると画像がズームしながら、フェードアウト非表示となる合わせ技。
See the Pen Webpage Hero header – scroll effects by EricPorter (@EricPorter) on CodePen.
Simple Parallax Header with Blur
スクロールに応じて画像をぼかしながらフェードアウトさせるテクニック。
See the Pen Simple parallax header with blur by tsimenis (@tsimenis) on CodePen.
スクロールするとトップ画面で表示された画像が飛ぶように消えていくアニメーションエフェクト。
See the Pen Hero OnScroll by verdzik (@verdzik) on CodePen.
Fullscreen Header + Bakcground Color Cycle
イメージ写真を画面いっぱいにフルサイズで展開し、淡いグラデーションカラーをアニメーション付きで重ねるCSSの小技テクニック。
See the Pen Fullscreen Header + Background Color Cycle by Kenny Sing (@KennySing) on CodePen.
Move Background Perspective on Mouse Move Effet
マウスの動きに合わせて背景がぐりぐりと動く、ユニークなアイデアを形にしたいときにどうぞ。
See the Pen Move background perspective on mouse move effect by Kriszta (@vajkri) on CodePen.
Continuous Scrolling Background on Sticky Header
見出しタイトル部分のみスクロールに合わせて残す可変レイアウトを実現します。
See the Pen Continuous scrolling background of sticky header by Robert Borghesi (@dghez) on CodePen.
スクロールに応じて紙芝居のようにコンテンツを切り替えることができ、プレゼンテーションなどにもオススメのスニペット。
See the Pen Parallax Background by Ravi Dhiman (@ravid7000) on CodePen.
細かい粒子がふわふわと飛び回っているようなエフェクトが特徴で、スクロールすると追加コンテンツが表示される仕組み。
See the Pen E V A S I O N by Fersho Pls (@fershopls) on CodePen.
固定ヘッダーデザイン
Responsive Scrolling Sticky Header
ヘッダーセクション下に配置されたナビメニューは、スクロールすることでページ上部に固定されます。
See the Pen Responsive Scrolling Sticky Header by Tommy Hodgins (@tomhodgins) on CodePen.
マテリアルデザインの動きを再現した固定ヘッダーデザイン。
See the Pen Scroll Header by Blake Bowen (@osublake) on CodePen.
あらゆる画面サイズに対応の、スクロールに応じてヘッダー幅が変化するテクニック。
See the Pen Responsive Scroll Header by Dylan Macnab (@DylanMacnab) on CodePen.
Animate Header In/Out After Scrolling
一定量スクロールすることで、用意してあるナビメニューをふわりと表示するテクニック。
See the Pen Animate header in/out after scrolling by antwon (@antwon) on CodePen.
ヘッダー部分のみフェードアウトで消えていくナビメニュー用テクニック。
See the Pen Header Fade by Emmanuel Pilande (@epilande) on CodePen.
Fixed Header Scroll Effect and Smart Nav for One-Page Site
ブログ記事レイアウトなどに活用したい、スクロールすると見出しタイトルがページ上部に移動、固定されます。
See the Pen Fixed Header Scroll Effect and Smart Nav for One-Page Sites by Summer (@n400) on CodePen.
スクロールに応じて自動で表示、非表示で切り替わるナビメニュー。
See the Pen Auto hide sticky header by jasper (@jboeijenga) on CodePen.
見出し部分をのぞいたナビメニューのみ固定されるスクロールテクニック。
See the Pen Sticky Header CSS Transition by Brady Sammons (@soulrider911) on CodePen.
スクロールすることで上部から出現するアニメーション付きナビメニューの作りかた。
See the Pen Top Sliding Nav by Chris Gruber (@cgruber) on CodePen.
CSSのみで実現できるお手軽な固定レイアウト用ハック。
See the Pen Fixed Header (Quick Hack) by Darcy Voutt (@darcyvoutt) on CodePen.
フッターデザイン
フッター部分をカーテン状に表示するパララックスエフェクト。
See the Pen Parallax Footer (Website Fixed Footer) by Austin Paquette (@mur) on CodePen.
ページ下まで到達すると、立体的にコンテンツを表示できるアニメーションが素敵なテクニック。
See the Pen footer with conent scale by Mātthīas (@mfritsch) on CodePen.
各種ソーシャルメディア用アイコンを並べたフッターデザイン。
See the Pen Social media footer by Andrew Canham (@candroo) on CodePen.
ページ下部に固定されたフッターデザインは、CSSのみで表現できるお手軽テクニック。
See the Pen simple fixed footer by Mātthīas (@mfritsch) on CodePen.
ページの一番最後までスクロールすると、隠されていたフッター用コンテンツが表示される仕組み。
See the Pen Fixed footer by Mads Håkansson (@madshaakansson) on CodePen.
フッター部分に固定されたアイコンにマウスホバーすると、コンテンツが下からスライド式に表示されます。
See the Pen Pure CSS Classy Footer by Nick Braver (@nickbraver) on CodePen.
Beautiful Aurora Footer Lights
ゆらゆらと光るオーロラのようなグラデーションカラーが、アニメーション付きで変化していくテクニック。
See the Pen Beautiful Aurora Footer Lights by Amit Ashok Kamble (@amyth91) on CodePen.
ビデオヘッダーデザイン
ビデオ動画をヘッダー全体に表示するJSテクニック。
See the Pen React Video Header by Mark Sarpong (@Markus1607) on CodePen.
背景全体に動画を配置し、カラーオーバーレイを重ねることで文字テキストやロゴなどの要素を読みやすくできます。
See the Pen video header by Alex (@rizer) on CodePen.
映画のオープニングシーンのようなエフェクトで、細かいパターンPNGを重ねることで、画質の荒い動画にも対応する工夫がされています。
See the Pen Hero video by Chris Simeone (@simspace-dev) on CodePen.
Fullscreen Background Video with Mix-Blend-Mode Overlay Text
ブレンドテクニックを活用することで、背景の動画に合わせた文字テキストが半透明に透けるテクニックが披露されています。
See the Pen Fullscreen Background Video with Mix-Blend-Mode Overlay Text by Dudley Storey (@dudleystorey) on CodePen.
まるで動画のようなつくりですが、実はCSSでアニメーションを実現したヘッダー向けデザインアイデア。
See the Pen Video Header Animation by Sylvia Maguia (@SMaguina) on CodePen.
Responsive Video Header with Gradient
レスポンシブでモバイル端末にも対応し、キラキラと輝く星空とグラデーションを動画に重ねた素敵テクニック。
See the Pen Responsive Video Header with Gradient by Jacob Davidson (@Reklino) on CodePen.
海外サイト Free Frontend で公開された 43 CSS Headers And Footers より許可をもらい、特にピックアップしたい作品を中心に転載、追加記述しています。
