CSS

【CSS】【z-index】ヘッダー画像を背景画像として設定し,スクロールによって画像とタイトルを隠すデザインの実装方法(ヘッダーメニュー等は常に表示させる)

今回はWebページのデザインの記事になります.ヘッダー画像がスクロールで隠れていくデザインをみたことがあるでしょうか.たまに使われていたりしますよね.スクロールで一緒に上にあがっていくのではなく,その場に留まり,コンテンツが上に被さるように隠れていくようなデザインです.今回はヘッダー画像上の文字も一緒に固定して,スクロールで隠していきます.

続きを読む

【jQuery】Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装する

この記事では,Webページにおける縦方向の現在位置を示すインジケーターをjQueryで実装します.ウィンドウのスクロール量に応じてインジケータが指し示す点も上下に移動します.また現在のインジケーター以外のインジケーターをクリックすることで,その高さのウィンドウまで自動スクロールするように実装します.Webページ全長がとても長い場合等に有効な方法です.それではインジケーターの作り方を見ていきましょう.

続きを読む

コピペで実装!jQueryでレスポンシブなハンバーガーメニューを実装する

ハンバーガーメニューとは,三本線のボタンのことです.クリックまたは,タップするとメニューが表示されます.一般的にはスマートフォン用のデザインで採用されることが多く,画面領域の有効活用ができます.もちろんPC等の画面が広いデバイスでも使用されることはありますが,今回はスマホ用の画面で,ハンバーガーメニューを表示し,大きい画面ではメニューを横並びにヘッダーに表示させます.これはCSSのみでは難しいので,jQueryを交えて実装していきます.

続きを読む

SNSアイコンのレイヤー展開するマウスオーバーアニメーションをjQueryで作る

この記事ではSNSアイコンのホバーエフェクトを作っていきます.CSSだけでも実装することはできるのですが,CSSが冗長になってしまうので,アニメーションはjQueryで作成していきます.今回は複数のレイヤーがマウスオーバー時に縦に展開するアニメーションを作成します.単純なボタンにするより,おしゃれでモダンなサイトに近づくことでしょう!

続きを読む