ケケンタこんにちは！ ケケンタです。
この記事では、
メインビジュアル下までスクロールすると固定ヘッダーの背景画像がふわっと浮かび上がる実装
についてご紹介をしていきます。
具体的な動き
See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.
もしプログラミング学習やお仕事で運動不足が気になっているなら
連続屈伸運動がおすすめです！
ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！
ケケンタ無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！
タイマースタート
3:00
ヘッダー背景をフワッと浮かび上がらせるのにはひと手間必要
ヘッダーに限らず、背景画像をフワッと浮かび上がらせるのは、簡単なようで少し手間がかかります。
その理由は
です。
したがって、「フワッ」とやわらかく背景画像を出現させるためには、background以外の要素へtransitionやanimationを適用する必要があります。
解説
ケケンタ「background-imageはanimationやtransitionを使用して動かすことができない」という事情を踏まえた上で、今回の実装では主に以下の仕様とすることで「ヘッダーの背景画像をフワッと浮かび上がらせる動き」を実現しています。
- ヘッダーの疑似要素（after）に背景画像を設定する
- ヘッダーの疑似要素に初期値としてopacity: 0;を指定し、透過させておく
- ヘッダーの疑似要素にtransitionを設定しておく（デモでは0.5を設定）
- メインビジュアル（濃いグレー）の下までスクロールしたら、ヘッダーの疑似要素のopacityを1にする＝ヘッダーの背景画像を可視化する
- メインビジュアル（濃いグレー）の上へ戻ったら、ヘッダーの疑似要素を再び透過する＝ヘッダーの背景画像を透過する
このように、ヘッダーそのものではなくヘッダーの疑似要素に背景画像を設定し、疑似要素をtransitionでコントロールすることで、ヘッダーの背景画像がフワッと浮かび上がっているような演出が実現可能です。
ケケンタ解説は以上となります！
この記事がお役に立ったなら何よりです。
もっと効率的にWeb制作を学びたい方へ
Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。
僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。
特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。
- 学習の方向性に迷いがある方
- 効率的にスキルを身につけたい方
- 転職や副業でWeb制作を活用したい方
- 挫折経験がある方
忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。
関連記事
基本的なアニメーション
スクロール系
メニュー・タブ・ナビゲーション
＼どれを読むか迷ったときのおすすめ‼／
フォーム・UI要素
＼どれを読むか迷ったときのおすすめ‼／
ボタン・アイコン
＼どれを読むか迷ったときのおすすめ‼／
テキスト
＼どれを読むか迷ったときのおすすめ‼／
コメント