ホバーしたテキストが上に押し出されるやつ(語彙力)(伝われ)

CSS

アニメーション

こんにちは、中の人です。
今回は実務でよく使われがちな、ホバーしたテキストが上の方に押し出されるようなエフェクトを実装していきます。

さっそくですが実装例

■HTML

	Example
	Example


■CSS
.sample-text {
	overflow: hidden;
	height: 2em;
}
.sample-text span {
	display: block;
	line-height: 2em;
	transform: translateY(0);
	transition: transform .1s cubic-bezier(.7, 0, 0, 1);
}
.sample-text:hover span {
	transform: translateY(-100%);
}

ポイントとしては、

  1. 親要素に固定値heightと”overflow: hidden;”を指定
  2. 子要素を2つに分け、hover時にそれぞれがY軸方向に動くように指定

といったところでしょうか。
一手間加えるだけで簡単にええ感じになります。
またtransitionにベジェ曲線を指定し、緩急を付けるのも割とミソかもしれません。

こんなパターンもあるよ

■HTML

	Example
	Example


■CSS
.sample-text {
	overflow: hidden;
	height: 2em;
}
.sample-text span {
	display: block;
	line-height: 2em;
	transform: translateY(0);
}
.sample-text:hover span {
	transform: translateY(-100%);
	transition: transform .1s cubic-bezier(.7, 0, 0, 1);
}

hover時のみtransitionを指定してあげることでhover後はアニメーションが無くなり、上に押し出されるだけのエフェクトにすることもできます。
transformの値を変更して、お好みの押し出し方向にして使ってみてください。

心からオススメしたいRecommend

JavaScript

ライブラリ

「Luxy.js」を使って慣性スクロールやパララックス効果を簡単に実装してみる

CSS

擬似要素

テキストリンクの下線を擬似要素を用いて表示させる方法

広告PR