ポートフォリオサイトの制作中に使った画像の入れ替えについて
ざっくりまとめたのでご紹介。
( 今回はhamlではなくhtmlそのまま使用しています)
やりたい事
以下のように、スクロール用によって画像をじんわり入れ替えたい。
1. 使う画像を準備する
今回は二枚の画像を入れ替えます。
クラスとかwidthはなんでも構いません。
sample.html
~ 省略 ~
<divclass="image-man">⬅️写真二枚いれる箱
<imgsrc="img/javascript.png"class="js-image"width= 39%><imgsrc="img/github.png"class="git-image"width= 39%></div>
~ 省略 ~
2. CSSを準備する
2枚目のGithubの方は下に重ねて、透過度を０にしておきます。
sample.css
.js-image{margin-left:395px;margin-top:140px;z-index:1;}.git-image{z-index:0;position:absolute;top:140px;left:395px;opacity:0;}3. JSで画像の入れ替えの準備をする
今回は、少しでも下にスクロールしたら2枚目の画像に変えたいので
１０pxで発火するようにしています。
じんわり透過率を変えたかったので（transition）を設定しています。
sample.js
window.onscroll=function(){varscrollTop=window.pageYOffset;//スクロール量を代入するif(scrollTop==0){//最上部に戻ってきた時$(".js-image").css('opacity','1')$('.js-image').css('transition','0.5s')$(".git-image").css('opacity','0')$('.git-image').css('transition','0.5s')}if(scrollTop>10){//１０pxスクロールした時$(".js-image").css('opacity','0')$('.js-image').css('transition','0.5s')$(".git-image").css('opacity','1')$('.git-image').css('transition','0.5s')}}以上で終了です。
ご覧いただきありがとうございました。