【コピペOK・CSSだけ】マウスオーバー時にテキストがスロットのように回るアニメーション
テキストをマウスオーバーすると、スロットマシーンのようにアニメーションされるCSSマイクロインタラクションです。
ナビゲーションhover時のアクセントなどにピッタリの演出です。
豊かに引きこもる。
Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。
今回のサンプルはこちら
「PENTA」をマウスオーバーすると、スロットマシーンの表示のように文字がくるっとアニメーションします。
コピペで済ませたい！とにかくお急ぎの方はこちら
今回のサンプルのコードです。
<ul>
<li><a href="#">PENTA</a></li>
</ul>
ul{
display: flex;
justify-content: center;
padding: 30px;
}
li{
background-color: #3E6296;
overflow: hidden;
}
li a{
position: relative;
display: block;
font-weight: bold;
color: #4DE1F7;
text-decoration: none;
}
li a::after{
content: "PENTA";
position: absolute;
top: 30px;
left: 0;
}
li:hover a{
transition: .5s;
transform: translateY(-30px);
}
プロならじっくり！しくみを理解したい方はこちら
ここからは、CSSの考え方を丁寧に解説していきます。
仕組みをちゃんと把握しておけば、微調整やアレンジも自由自在に対応できるようになります。
とりあえず配置
まずは、要素を配置します。
<ul>
<li><a href="#">PENTA</a></li>
</ul>
ul{
display: flex;
justify-content: center;
padding: 30px;
}
li{
background-color: #3E6296;
}
li a{
font-weight: bold;
color: #4DE1F7;
text-decoration: none;
}
擬似要素を追加
「PENTA」の下にもう一つ「PENTA」を作るのですが、ややこしいので取り急ぎ「PENTE」にしておきます。
・擬似要素(::after)を使って「PENTE」を作成
・positionを使って「PENTE」を「PENTA」の下30pxに配置
ul{
display: flex;
justify-content: center;
padding: 30px;
}
li{
background-color: #3E6296;
}
li a{
position: relative;
display: block;
font-weight: bold;
color: #4DE1F7;
text-decoration: none;
}
/* 「PENTE」を作成して「PENTA」の下30pxに配置 */
li a::after{
content: "PENTE";
position: absolute;
top: 30px;
left: 0;
}
アニメーションをつける
li要素をマウスオーバーすると、a要素が30px上へ移動するようなアニメーションをつけます。
・移動距離の設定には、transformプロパティを使います。
・アニメーション設定には、transitionプロパティを使います。
・「PENTE」を「PENTA」に戻します。
ul{
display: flex;
justify-content: center;
padding: 30px;
}
li{
background-color: #3E6296;
}
li a{
position: relative;
display: block;
font-weight: bold;
color: #4DE1F7;
text-decoration: none;
}
li a::after{
content: "PENTA"; /* 「PENTA」に戻す */
position: absolute;
top: 30px;
left: 0;
}
li:hover a{
transform: translateY(-30px); /* 現在位置より30px上へ移動 */
transition: transform .5s; /* 0.5秒かけて移動させる */
}
擬似要素部分を非表示にしておく
最後の仕上げです。
li要素にoverflow: hiddenを足して、要素からはみ出した部分を非表示にします。
li{
background-color: #3E6296;
overflow: hidden; /* 下側の「PENTA」を非表示に */
}
これで完成です。
急がば回れのマイクロインタラクション
positionやoverflowにtransform、擬似要素(::after)等、中級のCSSがたくさん登場した今回のマイクロインタラクション、いかがでしたでしょうか。
急いでいる時など、つい検索にかかったものをそのままコピペして凌ごうとしがちですが、根本を理解していないと結局チューニングに時間を取られて本末転倒なんですよね。
最初は時間がかかっても、着実にコードを理解して、自分のレパートリーにしていくことが真の近道です。
