今回はヘッダーのロゴを画面スクロールでメインビジュアルを過ぎたところで別のロゴに変更する方法を記事にしました。
デモコードも一緒に掲載しているので、ぜひ参考にしてみてください。
最初のページ表示では通常ロゴが表示。
スクロールが進み、今回はファーストビューの80%を過ぎた辺りからヘッダーが一瞬フェードアウト。
その後、100%通過後にロゴが変更されヘッダーが再び表示されます。
今回もレスポンシブは、自作のClamp計算ツールで算出した値をつかってます。
HTMLのマークアップ
ヘッダー部分とトップのメインビジュアル、ロゴ画像を設置。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ヘッダー上から出現</title> <link rel="stylesheet" href="style.css"> </head> <body> <header id="header" class="header-inner header"> <div class="header-wrap"> <h1 class="header-logo"> <a href="/"> <img id="initialLogo" src="img/inoprologo.png" alt="kmftロゴ"> <img id="newLogo" class="js-hidden" src="img/kmftlogo.png" alt="いのプロロゴ"> </a> </h1> <div class="header-nav"> <ul class="nav-list"> <li><a href="#" class="nav-item">ホーム</a></li> <li><a href="#" class="nav-item">サービス</a></li> <li><a href="#" class="nav-item">制作事例</a></li> <li><a href="#" class="nav-item">ニュース</a></li> </ul> <div class="header-btn"> <a href="#" class="header-contact"> お問い合わせ </a> </div> </div> </div> </header><!-- /.header-inner --> <section class="top-mv js-fvheight"> <!-- <div class="top-image"> --> <div class="top-image"> </div> </section> <main> <div> テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章<br> テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 テスト文章 </div> </main> <script src="main.js"></script> </body> </html> |
CSSでスタイルを調整
ヘッダー・ロゴ・ボタンなどのスタイルです。
今回はjs-hiddenでJavaScriptでクラスのをつけたり外したりして表示・非表示の制御をしてます。
.js-hidden は画像の非表示クラス。
.header.js-none はヘッダーのフェードアウト状態。
.nav-list a:hover はホバーで若干透過。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
@charset "utf-8"; * { margin: 0; padding: 0; box-sizing: border-box; } a { text-decoration: none; display: block; } .header { width: 100%; position: fixed; z-index: 1000; opacity: 1; transition: opacity 1s ease; background-color: rgba(255, 255, 255, .1); } .header.js-none { opacity: 0; transition: opacity .1s ease; } .js-hidden { display: none; } .header-wrap { display: flex; justify-content: space-between; align-items: center; max-width: 1920px; margin-inline: auto; /* padding: 1.5625vw 4.1666666667vw; */ padding: clamp(15px, -0.0812vw + 21.23px, 20px) clamp(24px, -0.4222vw + 56.42px, 50px); } /* .header-logo { width: min(3rem, 60px); } */ .header-logo #initialLogo { /* width: 100%; */ width: min(3rem, 60px); height: 100%; object-fit: contain; vertical-align: bottom; } .header-logo #newLogo { /* width: 100%; */ width: min(5rem, 100px); /* height: 50px; */ height: 100%; vertical-align: bottom; object-fit: cover; } .header-nav { display: flex; align-items: center; /* gap: 2.5rem; */ gap: clamp(20px, 2.6596vw + -0.43px, 40px); } .nav-list { display: flex; align-items: center; /* gap: 2.5rem; */ list-style: none; gap: clamp(20px, 2.6596vw + -0.43px, 40px); } .nav-list a { font-size: clamp(14px, 0.5319vw + 9.91px, 18px); color: #0d0d0d; transition: .6s; } .nav-list a:hover { opacity: .5; } .header-contact, a.header-contact { font-size: clamp(14px, 0.5319vw + 9.91px, 18px); font-weight: 700; color: #fff; background-color: rgb(247, 64, 64); border-radius: 100vh; padding: 10px clamp(20px, -0.0650vw + 24.99px, 24px); transition: .6s; } .header-contact:hover, a.header-contact:hover { background-color: rgb(239, 121, 121); color: #fff; } .top-mv { width: 100%; height: 100vh; } .top-image{ width: 100%; height: 100%; background-image: url(img/about-1.jpg); background-repeat: no-repeat; background-position: top; background-size: cover; } main { height: 2000px; max-width: 1400px; margin: 0 auto; text-align: center; padding-top: 200px; } |
JavaScriptでロゴ・ヘッダーの制御
次のJavaScriptコードで、スクロール量に応じて次の処理を行っています：
✅ 80%通過：ヘッダーがフェードアウト
✅ 100%通過：ヘッダー再表示・ロゴ変更
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/* =========================== header入替＆ロゴ入替 ============================ */ document.addEventListener("DOMContentLoaded", function() { const windowElement = window; const header = document.querySelector('.header'); const jsFvHeight = document.querySelector('.js-fvheight'); const initialLogo = document.getElementById('initialLogo'); const newLogo = document.getElementById('newLogo'); let appliedSmallClass = false; // フラグを初期化 function checkScroll() { const scrollTop = windowElement.scrollY; const fvOffsetTop = jsFvHeight.offsetTop; const fvHeight = jsFvHeight.offsetHeight; // 80%の高さの位置 const eightyPercent = fvOffsetTop + (fvHeight * 0.8); // 100%の高さの位置 const hundredPercent = fvOffsetTop + fvHeight; // ヘッダーの処理 if (scrollTop >= eightyPercent && scrollTop < hundredPercent) { header.classList.add('js-none'); } else { header.classList.remove('js-none'); } if (scrollTop >= hundredPercent) { header.classList.remove('js-none'); } if (scrollTop < eightyPercent) { header.classList.remove('js-none'); } // 90%の位置で initialLogo と newLogo を切り替え if (scrollTop >= eightyPercent) { initialLogo.classList.add('js-hidden'); } else { initialLogo.classList.remove('js-hidden'); } // 100%の位置で initialLogo と newLogo を切り替え if (scrollTop >= hundredPercent) { newLogo.classList.remove('js-hidden'); } else { newLogo.classList.add('js-hidden'); } } // スクロールイベントに対して関数をバインド windowElement.addEventListener('scroll', checkScroll); // ページロード時に一度チェック checkScroll(); }); |
作成・運営におすすめのサーバー「エックスサーバー」
これからWebサイトを本格的に運営していくなら、信頼性の高いレンタルサーバーを選ぶことが非常に重要です。特に、動画埋め込みなどを活用したサイトでは安定した表示速度や高いセキュリティ性能が求められます。
そこでおすすめなのが【エックスサーバー】です。
- 高速で安定したサーバー環境
- WordPressとの相性も抜群
- 初心者でも安心のサポート体制
- 独自ドメイン永久無料キャンペーン実施中（※タイミングによります）
現在、エックスサーバーでは新規契約キャンペーンも実施中です。
この機会に、ぜひ以下のリンクからチェックしてみてください！
コメント