Q&A
質問文に書かれているHTMLと質問文に書かれているJavaScriptだけで問題が再現しますか?
scrollIn のスタイルはどうなっていますか。
前提
Jqueryを使って、該当の要素がスクロールされて画面の中に入ってきたときに、ひとつずつフェードインさせるということをやろうとしていますが、少しスクロールすると画面の中に入ってきていない要素もフェードインしてしまいます
※以下のページを参考にコードを作りました
https://imasashi.net/element-fadein.html
実現したいこと
Jqueryを使って、該当の要素がスクロールされて画面の中に入ってきたときに、ひとつずつフェードインさせたい
発生している問題・エラーメッセージ
該当の要素がスクロールされて画面の中に入ってきたときに、ひとつずつフェードインさせるということをやろうとしていますが、少しスクロールすると画面の中に入ってきていない要素も全てフェードインしてしまいます
該当のソースコード
html
1<dl class="biography"> 2 <dt class="slideIn"> 3 <p style="margin-top: 0px;"><strong>2015年 5月</strong></p> 4 </dt> 5 <dd class="slideIn"> 6 <div class="row toipc" > 7 <div class="col-md-6 text"> 8 <p class="history_title"><strong>【5/31】ステージデビュー</strong></p> 9 10 <p>東京・赤坂BLITZにて行われたPASSPO☆の「PASSPO☆ ワンマンフライトツアー2015〜More Attention〜」にて、初パフォーマンスが披露された。</p> 11 </div> 12 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/3V8A0597.webp" style="width: 100%;" /></div> 13 </div> 14 15 16 </dd> 17 <dt class="slideIn"> 18 <p><strong>2015年 9月</strong></p> 19 </dt> 20 <dd class="slideIn"> 21 <div class="row topic"> 22 <div class="col-md-6 text"> 23 <p class="history_title"><strong>【9/2】「サムライガール」リリース</strong></p> 24 25 <p>1stシングル「サムライガール」を発売。</p> 26 </div> 27 28 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/samurai_girl.jpg" style="width: 100%;" /></div> 29 </div> 30 31 </dd> 32 <dd class="slideIn"> 33 <div class="row topic"> 34 <div class="col-md-6 text"> 35 <p class="history_title"><strong>【9/6】1stフリーワンマン開催</strong></p> 36 37 <p>morph-tokyoにて1stフリーワンマンライブ「アイドルはスポーツだ!」を開催。</p> 38 </div> 39 40 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/putipasspo_20150907_04.webp" style="width: 100%;" /></div> 41 </div> 42 43 44 </dd> 45 <dt class="slideIn"> 46 <p><strong>2016年 1月</strong></p> 47 </dt> 48 <dd class="slideIn"> 49 <div class="row topic"> 50 <div class="col-md-6 text"> 51 <p class="history_title"><strong>【1/20】「Go Fight! Fly High!」リリース</strong></p> 52 53 <p>2ndシングル「Go Fight! Fly High!」発売。</p> 54 </div> 55 56 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/go_fight_fly_hIgh.jpg" style="width: 100%;" /></div> 57 </div> 58 59 60 </dd> 61 <dt class="slideIn"> 62 <p><strong>2016年 5月</strong></p> 63 </dt> 64 <dd class="slideIn"> 65 <div class="row topic"> 66 <div class="col-md-6 text"> 67 <p class="history_title"><strong>【5/28】1stワンマン開催</strong></p> 68 69 <p>東京・原宿アストロホールにてぷちぱすぽ☆1stワンマンライブ開催。</p> 70 </div> 71 72 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/putipasspo_20160604_14.jpg" style="width: 100%;" /></div> 73 </div> 74 75 76 </dd> 77 <dt class="slideIn"> 78 <p><strong>2016年 8月</strong></p> 79 </dt> 80 <dd class="slideIn"> 81 <div class="row topic"> 82 <div class="col-md-6 text"> 83 <p class="history_title"><strong>【8/5,6,7】TIF出演</strong></p> 84 85 <p>TOKYO IDOL FESTIVAL 2016に出演。当サイトの管理人はこのTIFで藤本理子さんのオタクになる。</p> 86 </div> 87 88 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/DSC7765.jpg" style="width: 100%;" /></div> 89 </div> 90 91 92 </dd> 93 <dt class="slideIn"> 94 <p><strong>2016年 9月</strong></p> 95 </dt> 96 <dd class="slideIn"> 97 <div class="row topic"> 98 <div class="col-md-6 text"> 99 <p class="history_title"><strong>【9/4】2ndワンマン開催</strong></p> 100 101 <p>東京・Mt.RAINIER HALL SHIBUYA PLEASURE PLEASUREにてぷちぱすぽ☆2ndワンマンライブ「サンバ DE 大運動会」開催。</p> 102 </div> 103 104 <div class="col-md-6 photo"></div> 105 </div> 106 107 108 </dd> 109 <dd class="slideIn"> 110 <div class="row topic"> 111 <div class="col-md-6 text"> 112 <p class="history_title"><strong>【9/14】「ウルトラサンバ」リリース</strong></p> 113 114 <p>1stアルバム「ウルトラサンバ」発売。</p> 115 </div> 116 117 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/ultra_samba.jpg" style="width: 100%;" /></div> 118 </div> 119 120 121 </dd> 122 <dt class="slideIn"> 123 <p><strong>2017年 5月</strong></p> 124 </dt> 125 <dd class="slideIn"> 126 <div class="row topic"> 127 <div class="col-md-6 text"> 128 <p class="history_title"><strong>【5/28】3rdワンマン開催</strong></p> 129 130 <p>東京・SOUND MUSEUM VISIONにて「2周年記念3rdワンマン～ひと足お先に！ぷち世界陸上～」開催。</p> 131 </div> 132 133 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/DSC7549.jpg" style="width: 100%;" /></div> 134 </div> 135 136 137 </dd> 138 <dt class="slideIn"> 139 <p><strong>2017年 9月</strong></p> 140 </dt> 141 <dd class="slideIn"> 142 <div class="row topic"> 143 <div class="col-md-6 text"> 144 <p class="history_title"><strong>【9/23】主催対バン初開催</strong></p> 145 146 <p>東京・代官山LOOPにて初主催フェス「ぷちぱすぽ☆の妹煮会vol.1」開催。</p> 147 </div> 148 149 <div class="col-md-6 photo"></div> 150 </div> 151 152 153 </dd> 154 <dt class="slideIn"> 155 <p><strong>2017年 10月</strong></p> 156 </dt> 157 <dd class="slideIn"> 158 <div class="row topic"> 159 <div class="col-md-6 text"> 160 <p class="history_title"><strong>【10/9】4thワンマン開催</strong></p> 161 162 <p>東京・代官山UNITにて「ぷちぱすぽ☆4thワンマンライブ〜秋の代官山大運動会〜」開催。</p> 163 </div> 164 <div class="col-md-6 photo"></div> 165 </div> 166 167 168 </dd> 169 <dd class="slideIn"> 170 <div class="row topic"> 171 <div class="col-md-6 text"> 172 <p class="history_title"><strong>【10/11】「メラメラジャンピン」リリース</strong></p> 173 174 <p>3rdシングル「メラメラジャンピン」発売。</p> 175 </div> 176 177 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/meramera_a.jpg" style="width: 100%;" /></div> 178 </div> 179 180 181 </dd> 182 <dt class="slideIn"> 183 <p><strong>2018年 2月</strong></p> 184 </dt> 185 <dd class="slideIn"> 186 <div class="row topic"> 187 <div class="col-md-6 text"> 188 <p class="history_title"><strong>【2/23】解散発表</strong></p> 189 190 <p>公式ブログより、3月21日をもって解散することを発表した。千葉、外園、藤本は学業や個人での芸能活動に専念し、八木、山本はグループ活動を中心に活動するという（その後、元PALETの反田葉月、羽原由佳とともに4月1日から新ユニット「なんきんペッパー」として活動すると発表された）。</p> 191 </div> 192 193 <div class="col-md-6 photo"></div> 194 </div> 195 196 197 </dd> 198 <dt class="slideIn"> 199 <p><strong>2018年 3月</strong></p> 200 </dt> 201 <dd class="slideIn"> 202 <div class="row topic"> 203 <div class="col-md-6 text"> 204 <p class="history_title"><strong>ラストワンマン開催</strong></p> 205 206 <p>ラストライブ「ぷちぱすぽ☆5thワンマンライブ〜春の学芸会 in原宿ベルエポック〜」を開催し解散。初お披露目から1,026日の活動期間であった。</p> 207 </div> 208 209 <div class="col-md-6 photo"><img alt="" src="<?php echo $path; ?>img/DY0H3rbVAAc8tAq.jpg" style="width: 100%;" /></div> 210 </div> 211 212 213 </dd> 214 215 </dl> 216
Javascript
1$(function() { 2$(window).scroll(function (){ 3 var windowHeight = $(window).height(); 4 var scroll = $(window).scrollTop(); 5 $('.slideIn').each(function(){ 6 var elemPos = $(this).offset().top; 7 if (scroll > elemPos - windowHeight + 100){ 8 $(this).addClass('scrollIn'); 9 }else{ 10 $(this).removeClass('scrollIn'); 11 } 12 }); 13 }); 14 15 }); 16
scrollIN
1 2.slideIn { 3 opacity : 0; 4 transform : translate(0, 100px); 5 transition : all 500ms; 6} 7 8.slideIn.scrollIn { 9 opacity : 1; 10 transform : translate(0, 0); 11} 12
試したこと
ソースを記載する順番を変えたりしてみましたが、うまくいきませんでした。
お手数おかけしますが、ご回答いただけますと幸いです。
ご確認ありがとうございます。
該当のスタイルは下記になります。
.slideIn {
opacity : 0;
transform : translate(0, 100px);
transition : all 500ms;
}
.slideIn.scrollIn {
opacity : 1;
transform : translate(0, 0);
}
おてすうおかけしますが、ご確認よろしくお願い致します。
質問文に書かれているソースで問題が再現しませんでした。ちゃんと1つずつ scrollIn スタイルが適用されていきます。
ご確認ありがとうございます。
もしかしたら別の部分が原因かもしれません。
（試しに本番環境にアップしてみましたが、すべて同時に scrollIn スタイルが適用されていました）
該当ページは下記になります。
http://putipasspo.com/biography.php
お手数おかけして申し訳ございませんが、ご確認いただけますでしょうか？
（別途ソースが必要であれば添付いたしますので、その旨ご連絡いただけますと幸いです。）
何卒よろしくお願い致します。
> http://putipasspo.com/biography.php
うーん、なぜかこのページだと $(window).height() の値がおかしいですね。$(window).height() を window.innerHeight に換えると動くかもしれません。
ご確認ありがとうございました！
いただいた方法で試したところ、無事動きました！！
http://putipasspo.com/biography.php
こちらの不勉強で申し訳ないのですが、
もしよろしければ、今回の事象は何が原因だったのかをご教示いただけますと非常に幸いです。
（可能な限りで問題ございません）
お願いばかりで大変申し訳ございませんが、何卒よろしくお願い致します。
> 今回の事象は何が原因だったのか
それはぱっと見ではわかりません。再現環境を構築する手間をかける義理はありませんし。
再現環境を持っている質問者さんが、JavaScriptコードやCSSを削りながら原因をさぐるしかないと思います。
承知いたしました。（変なことお伺いして失礼しました...）
ご確認ありがとうございました！
回答1件
0
交差処理(IntersectionObserver)をつかってみてください
javascript
1<style> 2img:not(.fadein){ 3opacity: 0; 4} 5.fadein{ 6 animation: fadein 1s; 7 animation-fill-mode:forwards; 8} 9@keyframes fadein{ 10 from{ opacity: 0} 11 to { opacity: 1} 12} 13</style> 14<script> 15window.addEventListener('DOMContentLoaded', function () { 16 const observer = new IntersectionObserver(changes=>{ 17 for (const t of changes) { 18 if(t.intersectionRatio>0){ 19 t.target.classList.add('fadein'); 20 } 21 } 22 }); 23 document.querySelectorAll('img').forEach(x=>observer.observe(x)); 24}); 25</script> 26<style> 27.dummy{ 28height:120%; 29} 30</style> 31<div class="dummy">dummy</div> 32<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1" loading="lazy"> 33<div class="dummy">dummy</div> 34<img src="https://placehold.jp/00ff00/00000/100x100.png?text=2" loading="lazy"> 35<div class="dummy">dummy</div> 36<img src="https://placehold.jp/0000ff/00000/100x100.png?text=3" loading="lazy"> 37<div class="dummy">dummy</div> 38<img src="https://placehold.jp/ffff00/00000/100x100.png?text=4" loading="lazy"> 39<div class="dummy">dummy</div> 40<img src="https://placehold.jp/00ffff/00000/100x100.png?text=5" loading="lazy"> 41<div class="dummy">dummy</div> 42<img src="https://placehold.jp/ff00ff/00000/100x100.png?text=6" loading="lazy"> 43<div class="dummy">dummy</div>
投稿2022/09/01 00:40
総合スコア117820
あなたの回答
tips
プレビュー
