Webクリエイターズニュース

スクロールによってヘッダーを変化させる

Pocket
LINEで送る

海外のサイトでスクロールするとヘッダーの縦幅が狭くなるような効果をよく見かけます。
縦幅だけでなく様々な効果が含まれたデータをダウンロード可能です。

On_Scroll_Header_Effects_with_CSS_Transitions

▼スクロールするとヘッダーの縦幅が狭くなります。

On_Scroll_Header_Effects_with_CSS_Transitions2

下記サイトではさらに様々な効果を確認できます。

demo
On Scroll Header Effects with CSS Transitions
解説&ダウンロード
On Scroll Header Effects | Codrops

この記事を書いた人
Kenji Goto
Kenji Gotoよつばデザイン
Pocket
LINEで送る