YouTubeにUPした「ホバーエフェクトを使ったメインビジュアル参考」について解説します。
ホバーエフェクトを使って2つ並んだ似た画像をユーザーの意思で比べられるUXの高いデザインを紹介します。
overflow:hiddenを使った表示範囲の限定
<div class="container">
<div class="left">
<div class="bg_left"></div>
</div>
<div class="right">
<div class="bg_right"></div>
</div>
</div>今回のコードでは.leftと.rightにoverflow:hidden;を指定することで、.leftと.rightのボックスをオーバーした子要素(.bg_leftと.bg_right)を非表示にしています。
後述しますが、ホバーしたタイミングで.leftと.rightのwidthを操作して画像の見える範囲を増減させます。
■overflowプロパティ
visible : (初期値)ボックスに収まらない部分は、はみ出す。
hidden : ボックスに収まらない部分は、非表示。
scroll : ボックスに収まらない部分は、非表示になりスクロールバーが表示される。またボックス内に収まった場合も常にスクロールバーが表示される。
auto : ボックスに収まらない部分は、非表示になりスクロールバーが表示される。ボックス内に収まった場合はスクロールバーは表示されない。
tableタグを使って表を作成した際、スマホ表示で横スクロールにしたい場合は、よくoverflow: auto;とwhite-space: nowrap;をセットで使ったりします。
overflow: auto;
white-space: nowrap;
backgroundプロパティの解説
動画の解説に戻りますが、顔となる画像をCSSで指定しています。今回はposition: absoluteで画面いっぱいにボックスを広げて、画像サイズはcoverで調節してます。
.bg_left{
position: absolute;
left: 0;
background: url(img/left.jpg) no-repeat center;
background-size: cover;
width: 100vw;
height: 100%;
}■よく使うbackground:url()の一括設定
background: url(img/bg.png) repeat size position color;
それぞれの指定の順番は自由でOKです。urlは画像のパスを、repeatはbackground-repeatの値を、sizeはbackground-sizeの値を、そのほかに関しても同じように、値をそれぞれそのまま指定できます。
以下では、それぞれのプロパティに関して覚えておいた方がいい値のみ紹介します。
■background-repeatプロパティ
画像を繰り返し表示するかどうかを指定します。基本1枚の画像を表示することが多いのでno-repeatとすることが多いです。
repeat : (初期値)画像を繰り返し表示。
no-repeat : 画像を1回だけ繰り返して表示。
■background-sizeプロパティ
画像のサイズを決定します。
contain
縦横比を維持したまま画像全てがボックス内に収まるように拡大縮小。
cover
縦横比を維持したままボックスを全て埋めるように拡大縮小。
auto
(初期値)縦横比を維持したまま元のサイズで表示される。(-positionが初期値の場合)
■background-positionプロパティ
画像の位置を決定します。
center,top,right,bottom,left : 中央、上、右、下、左寄せでそれぞれ配置。
30% 70% : ボックス、画像それぞれ水平方向に左端から30%、垂直方向に上から75%の点が重なる位置に配置。
■background-colorプロパティ
ボックスの背景色を決定します(画像の下にひく色)。
#000 : 16進数RGB指定。色を指定できるものならなんでも可。
transparent : 無色透明。
jqueryの.hover()を使ったホバーエフェクトの実装
$(function(){
$('.left').hover(function(){
$(this).css('width','90%')
$('.right').css('width','10%');
},function(){
$(this).css('width','50%')
$('.right').css('width','50%');
});
$('.right').hover(function(){
$(this).css('width','90%')
$('.left').css('width','10%');
},function(){
$(this).css('width','50%')
$('.left').css('width','50%');
});
});jqueryの.hover()を使って.leftと.rightにマウスホバーした時、それぞれのwidthを同時に変更しています。それぞれの要素にtransitionを指定することで、滑らかにwidthが変化しているように見せています。
■.hover()の使い方
前半にホバーした時の処理を書いて、後半にはホバーが外れた時の処理を書きます。
$(function(){
$('.hoge').hover(function(){
//ホバーした時の処理
},function(){
//ホバーから外れた時の処理
});
}最後に
動画をまだ見ていない方は是非チェックしてみてください！音声はBGMのみなので、再生速度を上げて流し見するのがおすすめです！
