スクロールによって出てきたり消えたりするロゴを実装したい

実現したいこと

・トップ画面からスクロールすると左上にフワッとロゴが出てきて、トップ画面に戻ると消えるようにしたい。

前提

トップ画面からスクロールすると出てくるところまではうまくいったのですが、そこからいくらスクロールしても消えなくなってしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<header class="header">
2        <img src="./images/spica_logo.png" id="header-logo">
3        <div class="header-area">
4            <ul class="header-list">
5                <li><a href="#">Menu</a></li>
6                <li><a href="#">ツアー</a></li>
7                <li><a href="#">星だより</a></li>
8                <li><a href="#">Access</a></li>
9                <li><a href="#">Vision</a></li>
10            </ul>
11            <div class="reservation">
12                <a href="#">予約をする</a>
13            </div>
14        </div>
15    </header>

JS
1$(function () {
2
3        const headNav = $('#header-logo');
4
5        $(window).scroll(function () {
6
7            if ($(this).scrollTop() > 100) {
8
9                // headNav.css("opacity", "1");
10
11                headNav.animate({ opacity: 1 }, 1000, 'linear');
12
13            }
14
15            else if ($(this).scrollTop() < 100) {
16
17                // headNav.css("opacity", "0");
18
19                headNav.animate({ opacity: 0 }, 1000, 'linear');
20            }
21
22        });
23
24    });
25

試したこと

//でメモになっている部分にするとうまくいくのですが、フワッとを実現できないので却下しました。なぜメモの部分はうまくいって、animateの方はうまくいかないのでしょうか。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

回答3件

animateの方がうまく行かない理由は、スクロールするたびに実行するのでアニメーションがリセットされているからと推測されます。

目的の動作はコメントアウトしてる方の動作と、cssのtransitionプロパティを使うことで楽に実装可能です。

css
1#header-logo {
2  transition: opacity 1s;
3}

投稿2023/03/17 04:12

ziopuzzle

総合スコア64

I had a lot of harvest after seeing this post of yours! Before, I used to play games, this is a fun game for entertainment, but now I will follow you, read your articles will have more knowledge. stumble guys

投稿2023/04/24 06:54