縦長の画像をマウスオーバーすると表示していない部分を縦スクロールで表示します。マウスアウトで画像の一番上に戻ります。
プラグインを利用した画像スクロールは下記の記事をご参照ください。
htmlのコードは下記になります。
上記のブラグインとは違い、縦長の画像のみを配置します。
<div class="hover_image_wrap">
<div class="hover_image">
<a href="https://www.yahoo.co.jp/" target="_blank" class="img_link">
<img src="yahoo-scroll.jpg" alt="">
</a>
<p class="caption_txt">
<a href="https://www.yahoo.co.jp/" target="_blank">Yahoo! JAPAN</a>
</p>
</div>
<div class="hover_image">
<a href="https://www.msn.com/ja-jp" target="_blank" class="img_link">
<img src="msn-scroll.jpg" alt="">
</a>
<p class="caption_txt">
<a href="https://www.msn.com/ja-jp" target="_blank">MSN</a>
</p>
</div>
</div>続いてCSSのコードです。
aタグは横幅と高さを固定にします。またoverflow: hiddenを設定して縦長の画像がはみ出す部分は非表示にします。画像にはposigion: relativeを設定します。jQueryでCSSのtopを操作して画像をスクロールするため、posigion: relativeを設定しておかないと動きません。
.hover_image_wrap {
display: flex;
justify-content: space-between;
margin: 0;
}
.hover_image {
width: 302px;
}
.hover_image a.img_link {
display: block;
width: 302px;
height: 202px;
border: 1px solid #dddddd;
overflow: hidden;
}
.hover_image img {
posigion: relative;
vertical-align: top;
}
.caption_txt {
margin: 10px 0 0;
padding: 0;
text-align: center;
}
@media screen and (max-width: 630px) {
.hover_image_wrap {
flex-direction: column;
}
.hover_image {
margin: 0 auto 2em;
}
.hover_image:last-child {
margin: 0 auto;
}
}最後にjQueryのコードです。
画像はanimateを利用してスクロールさせます。durationはマウスオーバー時のスクロールは長く、マウスアウト時のスクロールは短く設定しています。easingは省略しているため初期値のswingが適用されます。
$(function() {
$(".hover_image img").hover(
function(){
var imgWidth = $(this).width();
var imgHeight = $(this).height();
$(this).stop(true).animate({'top': -imgHeight+200},imgHeight*5);
},
function(){
var imgWidth = $(this).width();
var imgHeight = $(this).height();
$(this).stop(true).animate({'top': 0},imgHeight*2);
});
});