実装したいこと
現在、ポートフォリオ用でWeb制作をしています。
いくつかコンテンツを散りばめたのですが、最近よく見かける「スクロールと共にフェードイン」や「スクロール外でフェードアウト」などの処理を実装したいです。
問題
・フェードインやフェードアウト処理の問題がどこにあるのかを知りたい
試したこと
以下のHTML、CSS、jQueryの処理を書きましたが、コンテンツが消失したまま、フェードインすることがありません。
以下にコードを貼らせて頂きます。
▶HTML
<p class = "interval">スクロール値:</p> <div class = "wrapper"> </div>
▶CSS
.wrapper { visibility: hidden; }
▶jQuery
$(window).scroll(function() { $('.interval').text('スクロール値:' + $(this).scrollTop()); }); $(window).scroll(function() { var top = $(this).scrollTop(); var scrollPixel = [1008, 1928, 2848, 3768, 4688, 5582]; var jumpTag = ['#topix1', '#topix2', '#topix3', '#topix4', '#topix5', '#topix6']; for (var i = 0; i < scrollPixel.length; i++) { if(top >= scrollPixel[i]) { $('jumpTag[i]').fadeIn(1200); } else { $('jumpTag[i]').fadeOut(1200); } } });
エラー情報
画像が表示されず、全く動作しません。
コードのどこに問題があるのかご教授いただければ幸いです。
よろしくお願い致します。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/07/12 06:33