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

ケケンタ

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

この記事では、

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

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

具体的な動き

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

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

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

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

その理由は

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

です。

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

解説

ケケンタ

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

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

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

ケケンタ

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

もしもWeb制作の独学に限界を感じたら

Web制作は未経験者でも比較的簡単に習得可能なスキルではあります。

しかしそうは言っても、Web制作を初めて学習する方にとっては覚えることが多く、独学で相談できる相手もいない状況だと気持ちが苦しくなってしまうこともあるのではないでしょうか。

そのようなときは、一度プログラミングスクールの利用を検討してみるのも良いかもしれません。

プログラミングスクールは高額な受講料がネックになることも多いですが、中には良心的な料金でWeb制作スキルを支援してくれるスクールもあります。

ご興味のある方は、以下の記事をご覧になってみて下さい。

あわせて読みたい

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE Web制作を仕事にしたいけど、プログラミングスクールに通うには費用がかかりすぎる……けど、独学だと相談相手もいないから、挫折しないか心配…… こうした悩みをお持ちの...

あわせて読みたい

Web制作の基礎～公開を5万円で学べるプログラミングスクール｜WithCode こんにちは！　ケケンタです。 この記事では次のような方へ向けて、Web制作の基礎～公開までを5万円以下で学べるWithCodeの「基礎コース」についてご紹介します。 この...