ベストセラー人気 WordPress テーマTop 30 詳細

Mediumのように上下にスクロールに応じて、ヘッダーの表示/非表示する

Last Updated:2020年11月15日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

過去韓国でのWebサイト制作が比較的初期のときにサイトは全体的にフラッシュを使用して派手な効果を重視しました。

私は、ウェブについては何も知らなかった頃(今もよくわからないが)にポートフォリオのホームページを一つ作ったことがありました。 デザインについても、htmlにもほとんど知ることがなかったので、「模倣は創造の母」という信念の模倣をするサイトを探しています。 そうするうちにシンプルながらデザインがまともな、ヨーロッパのデザイン会社のサイトを発見した。

当時、そのサイトの全体的な雰囲気を模倣して、フラッシュのサイトを作りました。 (より正確には、フラッシュプログラムは複雑で学ぶ意欲をできない見通しがSwishと呼ばれるプログラムを使用していました。)しかし、そのサイトが意外にいくつかのクライアントから好評をいただきました。 主にIT業界の担当者がサイトを良く見ています。 (Wayback Machineサイトで、当時のサイトを検索してみると、検索がしますが、ブラウザの互換性がないため、ほとんどのレイアウトが崩れ出ますね。)

個人的にデザインについてわからないが、可能な限りシンプルなデザインを好む方です。 デザインと関連して、このような言葉がありますね。

「Good design is as little design as possible」 - Dieter Rams

良いデザインとはデザインが入ったそうにないようなデザインという意味のように聞こえる。

Matthewさんの "科学的な最近のメニューの傾向"文を見れば 訪問者がコンテンツに最大集中できるように、文章を読みながら、他の関連のないコンテンツはviewで見えないようにすることが大勢といいます。

Medium(ミディアム)サイトの場合、レイアウト面でやや寒いと感じることができますが、コンテンツに集中できるように最大限配慮したことを知ることができます。 ミディアムからマウスを下にスクロールすると、ヘッダーが非表示になります。 そうするうちに、マウスを上にスクロールすると、ヘッダーが表示されるような方法で動作します。

Mediumで文を読んで、マウスを上にスクロールすると、隠されていたヘッダが表示される。
Mediumで文を読んで、マウスを上にスクロールすると、隠されていたヘッダが表示される。

このように 下にスクロールすると、ヘッダーが隠されて上にスクロールすると、ヘッダーが表示されるようにする効果をjQueryを使用してして簡単に実装できます。 次のjsFiddleで、実際のサンプルコードとどのように動作するかを見ることができます。

コードの詳細な説明は、 この記事を参照してください。

どなたフラッシュ作業が嫌い WordPressに乗り換えましたら今 Slider Revolutionを使用していると言った。 このように、コンテンツではなく、視覚的な側面を重視するのは(以前より多くの変わっが)一部では相変わらずのようです。 もちろんサイトの性質に応じて、どちらをより重視するかを決定しなければだろうがね。 しかし、単純に見せており、目に見えるサイトを作るのが難しいいくつかのデザイナーの言葉がね。



コメントを残す

コメント