ライブラリ研究科の、ユゲタです。
色々なライブラリの中のコードを見ていると、簡単にできる新しい技術の発見をする事があります。
今回は、とあるwebサイトを見ていた時に、cssのhoverアクションが、入口と出口で違うモーションをしていて、
これまで、そんなことやろうと思ったこともなかったんですが、いったいどうやって実現しているのか、
どうしても気になって、寝る時間を削って、調べてみました。
それを惜しげもなく、ブログで公開しておこうと思います。
・・・え？恩着せがましすぎる？・・・自分で言っておかないと誰も言ってくれないので・・・
通常のhover処理
<a class="sample-1" href="">マウスカーソルを乗せて</a>
<style>
a.sample-1{
position:relative;
display:inline-block;
padding:10px;
line-height:50px;
border:1px solid red;
text-align:center;
text-decoration:none;
font-weight:bold;
overflow:hidden;
}
a.sample-1:hover{
color:white;
}
a.sample-1::before{
content:"";
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
transform:scaleX(0);
background-color:red;
z-index:-1;
transition-property:transform;
transition-duration:0.5s;
transform-origin: left center;
}
a.sample-1:hover::before{
transform:scaleX(1);
}
</style>
まず、サンプルのコードはこれです。
transitionをhoverの有り無しで、transform-scaleのサイズを変更しています。
マウスのhover-onした時に、背景色が、メーターのように、0 -> fullになって、
hover-outした時に、full -> 0にもどるという、一般的なtransitionアニメーションです。
マウスカーソルを乗せて
in-outで違うモーション
<a class="sample-2" href="">マウスカーソルを乗せて</a>
<style>
a.sample-2{
position:relative;
display:inline-block;
padding:10px;
line-height:50px;
border:1px solid red;
text-align:center;
text-decoration:none;
font-weight:bold;
overflow:hidden;
z-index:1;
}
a.sample-2:hover{
color:white;
}
a.sample-2::before{
content:"";
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
z-index:-1;
transform:scaleX(0);
background-color:red;
transition-property:transform;
transition-duration:0.5s;
transform-origin: right center;
}
a.sample-2:hover::before{
transform:scaleX(1);
transform-origin: left center;
}
</style>
こんどは、先程のコードに１行追加して、みました。
一番最後の値の
transform-origin: left center;
が追加されています。
こうすることで、hover-outした時に、hover-inとは、逆方向にアニメーションしているのがわかると思います。
マウスカーソルを乗せて
いろいろ応用
この方式を利用すると、アンダーラインのアニメーションもこのようにできます。
<a class="sample-3" href="">マウスカーソルを乗せて</a>
<style>
a.sample-3{
position:relative;
display:inline-block;
padding:2px 5px;
text-align:center;
text-decoration:none;
font-weight:bold;
z-index:1;
color:black;
}
a.sample-3::before{
content:"";
position:absolute;
left:0;
bottom:0;
display:block;
width:100%;
height:1px;
z-index:-1;
transform:scaleX(0);
background-color:black;
transition-property:transform;
transition-duration:0.5s;
transform-origin: right bottom;
}
a.sample-3:hover::before{
transform:scaleX(1);
transform-origin: left bottom;
}
</style>
マウスカーソルを乗せて
もちろん、縦方向にもできます。
<a class="sample-4" href="">マウスカーソルを乗せて</a>
<style>
a.sample-4{
position:relative;
display:inline-block;
padding:10px;
line-height:50px;
border:1px solid orange;
text-align:center;
text-decoration:none;
font-weight:bold;
overflow:hidden;
z-index:1;
}
a.sample-4:hover{
color:white;
}
a.sample-4::before{
content:"";
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
z-index:-1;
transform:scaleY(0);
background-color:orange;
transition-property:transform;
transition-duration:0.5s;
transform-origin: left bottom;
}
a.sample-4:hover::before{
transform:scaleY(1);
transform-origin: left top;
}
</style>
マウスカーソルを乗せて
趣向が変わって、いい感じにもできるかもですね。
工夫次第で、アイデアは無限大！
効果的なwebサイトが作れそうですわい！！！
0 件のコメント:
コメントを投稿