スクロールすると固定ヘッダーの背景がフワッと浮かび上がる実装

ケケンタ

こんにちは！　ケケンタです。

この記事では、

メインビジュアル下までスクロールすると固定ヘッダーの背景画像がふわっと浮かび上がる実装

についてご紹介をしていきます。

具体的な動き

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス 

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法 

• Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
• 会員の自動更新を解除しておく＝期限が来たら自動解約
• １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

ヘッダー背景をフワッと浮かび上がらせるのにはひと手間必要

ヘッダーに限らず、背景画像をフワッと浮かび上がらせるのは、簡単なようで少し手間がかかります。

その理由は

background-imageはanimationやtransitionを使用して動かすことができないため

です。

したがって、「フワッ」とやわらかく背景画像を出現させるためには、background以外の要素へtransitionやanimationを適用する必要があります。

解説

ケケンタ

「background-imageはanimationやtransitionを使用して動かすことができない」という事情を踏まえた上で、今回の実装では主に以下の仕様とすることで「ヘッダーの背景画像をフワッと浮かび上がらせる動き」を実現しています。

メインビジュアルの下までスクロールしたかどうかの判定にはjQueryを使用しています。
具体的には、メインビジュアルの下までスクロールしたらjQueryでheader要素に.view-bgクラスを付与することで、ヘッダー疑似要素のopacityを1にしています＝ヘッダー背景画像の可視化

このように、ヘッダーそのものではなくヘッダーの疑似要素に背景画像を設定し、疑似要素をtransitionでコントロールすることで、ヘッダーの背景画像がフワッと浮かび上がっているような演出が実現可能です。

ケケンタ

解説は以上となります！
この記事がお役に立ったなら何よりです。