大人の余裕！？CSSでぬめっと動かせばかっこいい！マウスオーバー編

2023年08月31日

html＆css

今回は大人の余裕！？ということでCSSで要素をぬめっと動かす方法をご説明させていただきます。

サイト作成を始めたばかりの皆様。今の時代はとりあえず「ぬめっと」「ゆらっと」させとけば大丈夫です。

冗談ですが、流行りとして動きのアクションはほぼほぼ「ぬめっと」させるのが現在の流れとなっていると思います。

マウスオーバーからクリックイベント・リサイズをした時の要素の動きから画面に入ったらふわっと表示させるなど、何でも「ぬめっと」しています。

今回はマウスオーバーで「ぬめっと」させて大人の余裕を感じさせる方法をご紹介させていただきます。

ぬめりの正体はtransition

ぬめっとする方法の正体はCSSでtransitionを設定すればOKです。
書き方はこちら

.numet{
		
		transition: all 0.8s 0.5s ease;

	}

書き方は個別に書く方法から、上記の様にまとめて書くこともできます。

transition:変化させるもの　何秒間かけて変化させる　何秒後に開始（ディレイ）　どんな方法で；

でまとめて書くことができます。
上記は

transition：全ての物を0.8秒かけて変化させて、アクションが起きてから0.5秒後に開始し、開始時と終了時はゆっくり変化すると書いてあります。

なんか難しそうですが正直細かな設定はほとんど使わないので下記の記述で大丈夫です。

.numet{
		
		transition: all 0.8s ;

	}

2つ記述することで、すべての物を0.8秒かけて変化させるという指定になりました。
どんな方法と何秒後に開始（ディレイ）は実務でほとんど使ったことがないので、基本的には上記の記述方法で問題ないかと思います。

使用見本　ぬめっと透明化

使用例をご紹介いたします。
まずはぬめっとしない場合はこんな感じ
HTML
画像をaタグで囲っているだけです。

<div class="numebox">
	<a href="" class="nonume"><img src="https://mariokun.com/cmswp/wp-content/themes/mariokun_temp/img/nume01.jpg" alt="ぬめっとしません"></a>
</div>

CSS

	.nonume{
		

		&:hover{
			
			opacity: 0.7;

		}
	}

aタグにnonumeクラスをつけて、ホバー時に透明のプロパティのopacity(1から数字を下げるにつれて透明）をつけています。
これだけでは当然ぬめっとしません。
マウスオーバーするとパタパタと透明になる感じですね。悪くはないですが今風ではないですね。
大人の余裕が感じられず、子供がはしゃいでいる感じです。（個人的感想です）

これをぬめっとするには先ほどのtransitionを入れてあげればOKです。
HTML（クラス名と画像を変えただけです）

<div class="numebox">
	<a href="#" class="nume01"><img src="https://mariokun.com/cmswp/wp-content/themes/mariokun_temp/img/nume02.jpg" alt="ぬめっとします" ></a>
</div>

CSSはこちら

	.nume01{
		
		transition: all 0.4s;
		&:hover{
			opacity: 0.7;
		}
		
		
	}

これで完成

3行目にtransitionを入れただけで簡単にぬめっと大人の余裕を感じる動きになりました。
変化する時間の数字を0.4～0.6ぐらいにするのがおすすです。

始めの頃はぬめっとするのが気持ちよく、ゆっくり動かしたくなり0.8とかにしがちですが、あまり遅いと少しイライラ感もでます。逆に0.2とかで早すぎと効果をあまり感じれないので、0.4～0.6が良いかと思います。

またマウスオーバーでのポイントは:hoverにtransitionを指定するのではなく、変化する元のタグであるaタグ本体に指定してください。

:hoverに指定すると、初めだけぬめっとして、ホバーから外れた時はパタっと素早く戻ってしまいます。

わからなくなったら、強引ですが両方入れとけば基本ぬめっとするので、大丈夫です。

使用見本　ぬめっと色変化と移動

最後にマリオ君のトップページに使っている下記のもっと見るボタンを解説したいと思います。
※リセットCSSやフォントなどは別途指定していますので、若干CSSの誤差があります。

もっとみる

上記ボタンはマウスオーバーのホバーで背景が白から青に
文字が黒から白に
矢印が青から白に
ボーダーが青からねずみ色に
おじさんが上ににょきっと移動して出てくる仕様です。
上記5項目すべてぬめっと動いています。

ちなにみぬめりなしだと下記の感じです。

もっとみる

パタパタというよりかチカチカしてる感じですね。何か急いでんの？って感じの動きになっています。
やはり少しぬめっとした方が、大人の余裕があっていいですね。
それでは解説させていただきます。
まずはHTML

<div class="btnaction"><a href="#">もっとみる</a></div>

CSSはこちら

.btnaction{
	
	max-width: 300px;
	margin: 0 auto;
	position: relative;
	
    &::before{

        content: '';
        display: block;
        width: 53px;
        height: 45px;
        background-size: contain;
        position: absolute;
        background:url("../img/woji.svg") no-repeat  ;
        left:calc(50% - 53px/2);
        top: 0;
        transition: all 0.5s;
    }
    &:hover::before{

        top: -43px;
    }

	a{
		
		padding: 20px;
		border:3px solid #2296DF;
		font-weight: 900;
		display: block;
		text-align: center;
		position: relative;
		border-radius: 30px;
		background: #FFF;
    color: #222;
		z-index: 2;
		box-shadow: 0px 0px 10px -6px #111;
		transition: all 0.5s;
        &::after{

            content: '';
            display: block;
            width: 9px;
            height: 15px;
            background-size: contain;
            position: absolute;
            background:url("../img/buaro.svg") no-repeat  ;
            top:calc(50% - 15px/2);
            right: 15px;
			transition: all 0.5s;
        }
	}
	a:hover{
			
		background:#2296DF ;
		border:3px solid #EEE;
		color: #FFF;
		opacity: 1;
		&::after{

			background:url("../img/siroico.svg") no-repeat  ;
		}
	}
	
}

それでは説明させていただきます。
htmlはシンプルにaタグをdivで囲っているだけです。

囲っているdivに疑似要素beforeでぴょこっとでるおじさんを入れています。
18行目にぬめりのtransitionを入れて
ホバーすると
17行目のtop:0;から22行目のtop:-43px；までぬめっと移動しています。

続いては背景ですが
37行目にぬめりのtransitionを入れて
aタグ34行目に背景白を指定し
ホバーで55行目の#2296DFの青色にぬめっと変化しています。
テキストも同様で
aタグ35行目のカラー＃222を指定して
ホバーで57行目の＃FFFの白色にぬめっと変化しています。
ボーダーも
aタグ28行目のボーダーのカラーで青を指定して
ホバーで56行目の＃EEEのネズミ色にぬめっと変化しています。

右矢印の部分はaタグに疑似要素afterで入れています。
50行目にぬめりのtransitionを入れて
47行目の青色の矢印画像から
64行目の白色の矢印画像に変化しています。

以上になります。

ちょっとした注意点ですが
displayプロパティにはききません。ホバーでdisplay:none;でをぬめっと消すなどはできません。連打してボタンを押しているみたいに高速でちかちかします。

この動きを表現したい時は、opacity:0;（透明）からopacity:1;（透明なし）などで表現しなければいけません。

いかがでしたでしょうか？transitionを指定するだけで一気に大人の余裕漂う動きをサイトにつけることができました。

ぬめっとさせたいところにコピペで簡単に動きをつけることができるのでサイト作成を始めたばかりの皆様は是非一度お試しください。