2018年02月2日(金)
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ
ランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。
スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがスティッキーになったり、実用的なアイデアが満載です。
各デモは「Run Pen」をクリックすると、動作します。
まずは、スクロールすると、ヒーローイメージがズームするヘッダ。
HTMLは非常にシンプルで、CSSもJSもシンプルなので、コピペで簡単に利用できます。今度は逆に、ヒーローイメージがフェードアウトするヘッダ。
ヒーローイメージをパララックスさせるのも面白い効果が得られます。
パララックスのエフェクトに、スティッキーを加えたヘッダ。
...
0
103
235
399author:
コリス
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ
‹ PREV
手書き風のイラストが可愛い！ファンシーな素材をお探しの方におすすめな森をテーマにしたパターン「Magic Forest Patterns」
NEXT ›
コンサルティングパートナー認定により新たなデジタルマーケティングの積極展開へ
Ads
2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ』についてまとめています。
この記事は特にレスポンシブ・javascript・アニメーション・SVG・LPについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
