指定ピクセル移動すると画像を差し替えたい。

現在画像の差し替え方法で悩んでおります…。

サイト上にある「dog.jpg」という画像があるのですが、これをマウスで100px下にスクロール下場合には、「cat.jpg」という別の画像に表示を切り替えたいのですが方法が分らず、調べてみるのですが指定ピクセルで出現させる方法はあるのですが、差し替えるという情報が見つからず相談をさせて頂きました。

出来ればフワッと切り替われば嬉しいのですが…。

スクロールの際の画像切り替え方法についてアドバイスをいただけないでしょうか。
お詳しい方宜しくお願いいたします。

質問者からの補足コメント

• すみません！！
  jqueryのバージョンをまた別のもので試したところ、上手く画像が切り替わるようになりました。
  お騒がせして申し訳ありません。
  
  今回アドバイスいただいたコード、とても見やすく初心者の私の勉強になります。
  こちらを参考に、色々と理解を深めて行きたいと思います。
  今回、とても困り悩んでいました、ご丁寧なアドバイス感謝申し上げます。
  本当に有難う御座いました。m(_ _)m

  No.1の回答に寄せられた補足コメントです。 補足日時：2015/12/10 18:01

No.1 ベストアンサー 回答者： fufufunofufufu 回答日時： 2015/12/10 17:08

こんにちは。

質問は理解できましたが、情報が足りないのでソースは想像です。
まず、100pxスクロールしたらということで、どこから100pxなのかわからないので、とりあえずページトップから100pxスクロールした場合とします。
jQueryを使用しますので、jQuery本体は別途読み込ませてください。

●方法１：
100px以上スクロールしたら画像が変わる。フェードなし。
フェードイン・アウトがないので、面白みは無いです。imgタグのファイル名を切り替えるので、ソース的には素直。

【HTML】
<div class="imgbox"><img src="dog.jpg"></div>

【jQuery】
<script>
$(window).scroll(function(){
var st = $(window).scrollTop();
if(st > 100){
$(".imgbox img").attr("src", "cat.jpg");
}else{
$(".imgbox img").attr("src", "dog.jpg");
}
});
</script>


●方法２：
100px以上スクロールしたら<img>が透過。それにより親要素<div class="imgbox">の背景画像が出てくる。CSS3によるフェードあり。
たぶん、見た目的にはこちらのほうが良いと思いますが、ソース的にはちょっとねじれ感はあります。

【HTML】
<div class="imgbox"><img src="dog.jpg"></div>

【CSS】
.imgbox{
width:120px;/*適宜画像サイズ*/
height: 60px;/*適宜画像サイズ*/
background: url("cat.jpg") no-repeat;
}
.imgbox img{transition: all 1s ease;}
.imgbox img.fade{opacity:0;}

【jQuery】
<script>
$(window).scroll(function(){
var st = $(window).scrollTop();
if(st > 100){
$(".imgbox img").addClass("fade");
}else{
$(".imgbox img").removeClass("fade");
}
});
</script>

---

他に１の方に.fadeOut().fadeIn()など使ったものも考えたのですが、jQueryでスライダーでなく<img>切り替えのエフェクトをつけるとあまり綺麗にできなかったので、上記のようなものになりました。
あとは最初にHTMLで<img>を２つとも書いて、表示非表示切り替える方法もあると思います。
ちなみに上記２つは、スクロールで上に戻ると（100px以下になると）再度元画像に戻る仕様です。
もし切り替わったままが良い場合はjQuery内のelse{～～}の部分を削除してください。

頑張ってください。

この回答へのお礼

fufufunofufufu様
早速のアドバイス有難う御座います。
記載頂きました内容で動作を試してみたのですが、私の環境ですと何れの設定でも動作を確認することが出来ませんでした…。TT
使っているjQueryに問題があるのかと、色々変更を行ったのですが画像がさし変わってくれませんでした。何か特別な設定が必要になりますでしょうか？
何度も申し訳ありません、宜しくお願いします。

お礼日時：2015/12/10 17:52