どうも。
WEBおじさんです。
年明けちゃいましたね。
あけましておめでとうございます。
ということで、今回はちょっとおしゃれな動きシリーズです。
オンマウスで背景と文字がちょっとおしゃれな動き方で変化するものを自作で作っちまおう、という企画です。
当然、上級者は鼻くそほじくりながらでもあっさり作っちゃうだろうものなんですけど、初心者さんと一部中級者さんはこういうものをネットに落ちてるプラグイン的なヤツを使って作ったりしてるので理屈とか作り方とか分からない人いますよね。
なので、今回はその作り方を解説します。
ちなみに、前の記事とかで言ってるかもしれませんが、作り方はたくさんあります。今回の作り方が正解というわけではなく、一つの方法であると認識してください。
もっと単純で機能的な作り方があるのであれば逆に教えてほしいくらいです。
プログラムは単純な作り方であればあるほど良いものです。
みなさんも追及してみてください。
ということで、いつもの先行デモはこちらです。
そして、ソース類は以下になります。
【HTML】
<ul class=”navigation”>
<li>
<span class=”word”>メニュー1</span>
<span class=”boxbg”></span>
</li>
<li>
<span class=”word”>メニュー2</span>
<span class=”boxbg”></span>
</li>
<li>
<span class=”word”>メニュー3</span>
<span class=”boxbg”></span>
</li>
<li>
<span class=”word”>メニュー4</span>
<span class=”boxbg”></span>
</li>
</ul>
【CSS】
ul.navigation {
display:flex;
justify-content:center;
align-items:center;
list-style:none;
}
ul.navigation li {
border:1px solid #acf;
position:relative;
background-color:#fdd;
cursor:pointer;
}
ul.navigation li span {
display:block;
width:100%;
height:100%;
transition: all 300ms 0s ease;
}
ul.navigation li span.word {
position:relative;
padding:10px;
z-index:2;
color:#acf;
}
ul.navigation li span.boxbg {
background-color:#acf;
position:absolute;
top:0;
left:0;
z-index:1;
width:2px;
}
【jQuery】
$(function(){
$(‘.navigation li’).hover(function(){
//オンマウス
$(this).find(‘.word’).css(‘color’,’#fff’);
$(this).find(‘.boxbg’).css(‘width’,’100%’);
},function(){
//マウスアウト
$(this).find(‘.word’).css(‘color’,’#acf’);
$(this).find(‘.boxbg’).css(‘width’,’2px’);
});
});
ということで、今回の動きはオンマウス時にナビゲーションボックスの左側から背景色がスライドされ、文字色も背景色に併せて変更されるようになっています。
以下、ソース解説です。
HTMLはulでリスト構成しています。
li内にはblock要素のspanが2つあり、一つはメニュー名、一つはオンマウス時の背景用のものです。
そしてCSSですが、ulはflexでナビゲーションを横並びにし、liにはpositionをrelativeにしてます。これは背景用のboxbgクラスをabsoluteで使うためです。
で、さらにboxbgは横幅2pxで左端に残してます。
次にspanは今回の変更のメインとなるのですが、今回の動き、実はjqueryのanimateは使用しません。
animateを使ったことがある人はわかると思いますが、滑らかな変化を作る場合は大体animateを使用すると思いがちです。
私もそう思っていたのですが、animateを使うよりも単純で同じ動きを作れたので、今回はanimateを使用しませんでした。
では、どういう作りなのか？
どうやったらanimateを使わずにanimateと同じ動きをさせることができたのか？
正解はCSSにあります。
その正解の解説の前にjQueryの解説をしますが、ここは見てわかる通り、非常に単純ですね。
hoverを使ってliにオンマウスした時にwordクラスのcolorを#fffに変更し、boxbgの横幅を100%に変更、それがオンマウスでなくなったときはwordのcolorは#acf、boxbgは横幅を2pxに戻すものです。
このjQueryは普通に実行するとカクカクした動きになります。
animateはこの動きを滑らかにするjQueryのメソッドです。
もちろん、書き方も変わります。
ですが、今回は普通にCSSを書き換えるというjQueryなので、animateを使うよりも単純だと思いました。
では、どこで滑らかな動きを実現しているのか？
そのからくりはspanに指定している「transition」にあります。
「transition: all 300ms 0s ease;」という書き方は、0.3秒かけて変化の動きを滑らかにする、という書き方です。
transitionは他にも色んな機能があるみたいなのですが、今回は「○秒かけて滑らかに変化させる」という動きのみの説明です。
ということで、CSS側で「滑らかに動かす」と設定し、実際の変化はJSで設定します。
実は、内容によってはjQueryを使わなくてもできます。
でも、今回の動きの場合はちょっと実現できなかったので要素を増やしてjQueryを使ったのです。
これで動きも横から色がスライドしてくる、というちょっとおしゃれな動きが実現できました。
単純で簡単で使えますよねー。
では、また次回～。
WEBおじさんでした～。
