こんにちは、エムケーワイです。どうやら関西地方も梅雨入りしたようです。
ちょっと投稿間隔があいてしまいました。この間何をしていたかというと、jQueryの勉強をしていました。これまでなんとなくjQueryを使っていましたが、きちんと勉強すればもっといろんなことが出来るようになるのではないかと考えたわけです。
で、勉強していてjQueryではありませんが、”overflow: hidden”の意外な使い方(私にとってはです^_^;)を知ることができたので、実際にここで実践してみようと思います。
まずは動作から見ていただきます。下の3つのボタンエリアにマウスを出し入れしてみてください。スマホの場合は、ボタンの内/外をタップですかね？
いかがでしょうか？
ボタンエリアにマウスを入れると、ボタンの背景色が左側から変わっていきますが、この時背景色が変化した部分は文字色も変化しています。例えば、2番目のボタンは、背景色が50%まで変わった時点では下図のようになります。
“A”の途中で文字色が変わっていますよね。”overflow: hidden”を応用するとこのようなことが出来てしまいます！
では、実現方法を説明します。
1. HTMLコード
ボタン部分のHTMLコードは下記の通りです。3列カラムを使っています。
<div class="wp-block-columns mkyButtons">
<div class="wp-block-column">
<button>2020 JUNE<span class="base"><span>2020 JUNE</span></span></button>
</div>
<div class="wp-block-column">
<button>HYDRANGEA<span class="base"><span>HYDRANGEA</span></span></button>
</div>
<div class="wp-block-column">
<button>UMBRELLA<span class="base"><span>UMBRELLA</span></span></button>
</div>
</div>- 一番外側のdiv要素にクラス”mkyButtons”を追加します。
- 各button要素内に2重のspan要素を入れます。
- 外側のspan要素にクラス”base”を付加します。
- 内側のspan要素にbutton要素と同じテキストを持たせます。
2重のspan要素でもう一つのボタンを作っているところがミソです。
2. CSS設定
ボタン部分のCSS設定は下記の通りです。
.mkyButtons {
background-color: olivedrab;
position: relative;
}
.mkyButtons button {
display: block;
position: relative;
width: 20rem;
height: 8rem;
margin: 2rem auto !important;
padding: 0;
font-size: 16px;
letter-spacing: 0.15em;
color: white;
background-color: darkorange;
border: none;
border-radius: 20px;
}
.mkyButtons button:hover {
text-decoration: none;
}
.mkyButtons button .base {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
overflow: hidden;
}
.mkyButtons button span span {
display: block;
width: 20rem;
height: 8rem;
line-height: 8remx;
color: olivedrab;
background-color: white;
border-radius: 20px;
}＜.mkyButtonsに対する設定＞
- 3列カラムブロックの背景色を設定しています。
＜.mkyButtons buttonに対する設定＞
- 最初に表示されるボタンに対する設定です。
- 子要素(外側のspan要素)のpositionを絶対指定できるよう”position: relative”とします。
- 幅を20rem(200px)、高さを8rem(80px)にします。
- 上下マージンを20px、左右マージンを”auto”にします。親テーマでの設定を上書きするために”!important”を付加しています。
- フォントサイズ、文字間隔、文字色、背景色等を設定します。
- ボーダーはなしとし、角を丸めます。
＜.mkyButtons button:hoverに対する設定＞
- マウスホバー時のアンダーラインを非表示にします。
＜.mkyButtons button .baseに対する設定＞
- 外側のspan要素に対する設定です。
- positionを絶対指定で”top: 0″、”left: 0″とします。
- 幅を0にします。これにより初期状態では表示されません。jQueryで幅を変更することで表示/非表示を切り替えます。
- 高さを100%にします。
- “overflow: hidden”を設定します。これで外側のspan要素からはみ出す内側のspan要素は表示されなくなります。
＜.mkyButtons button span spanに対する設定＞
- 内側のspan要素に対する設定です。
- display、width、height、border-radiusをbutton要素と同じ設定にします。幅、高さはbutton要素と同じですが、外側のspan要素からはみ出す部分は表示されません。
- 文字色、背景色を設定します。ここでは文字色は3列カラムブロックの背景色と同じに、背景色を白にしています。
ボタンエリアにマウスが入ると、button要素の背景色と文字色を変更するのではなく、button要素上に背景色と文字色が異なるspan要素が表示されることになります。
3. jQueryコード
今回作成したjQueryコードは下記の通りです。
jQuery(function(){
var duration = 400;
jQuery('.mkyButtons button')
.on('mouseover', function(){
jQuery(this).find('> span')
.stop(true).animate({width: '100%'}, duration, 'swing');
})
.on('mouseout', function(){
jQuery(this).find('> span')
.stop(true).animate({width: '0%'}, duration, 'swing');
});
});- アニメーションの所要時間を400msとしています。
- 各ボタンに対し”mouseover”イベントが発生すると、外側のspan要素の幅を100%にするアニメーションを開始します。これでボタンの背景色、文字色が変わります。
- 各ボタンに対し”mouseout”イベントが発生すると、外側のspan要素の幅を0%にするアニメーションを開始します。これでボタンの背景色、文字色が元に戻ります。
外側のspan要素は”overflow: hidden”が設定されているので、アニメーション動作中内側のspan要素が徐々に表示/非表示されていき、テキストの色が左側/右側から変わっていく効果が得られるわけですね。
findメソッドは子孫要素の中から指定された要素を取得するメソッドです。今回は引数として”> span”を指定しているので、直下のspan要素(外側のspan要素)を取得することになります。
stopメソッドは、今回jQueryの勉強を進める中で知ったメソッドで、引数をtrueとして呼び出すと、アニメーション動作を途中でキャンセルすることができます。アニメーションの途中でマウスを出し入れすると動作が変わるはずです。
上記コードではひとつのjQuery(‘.mkyButtons button’)に対して、”mouseover”イベントに対する処理と”mouseout”イベントに対する処理を続けて記載しています。このような記載方法をメソッドチェーンと呼ぶそうです。メソッドチェーンを使うことにより、jQuery()の記述を減らせるため、CPUの負荷が軽減されるという事です(これくらいの短いコードではほとんど影響ないと思いますが…)。
以上、”overflow: hidden”の応用についてでした。
“overflow: hidden”ってこんな効果を出す使い方もできるんですね。「目から鱗」でした！
これからもjQueryの勉強を続けていき、面白い使い方があれば、本サイトで実践してみようと考えています。
最後までお読みいただきありがとうございました。