すでに custom_role 権限グループは存在します。 「Google Sites」はワイヤーフレーム制作ツールとして使える？実際に触ってみた感想 // CodePool

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

CSS

アニメーション

2020/05/08

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

さっそくですが実装例

■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%);
}
Example Example

ポイントとしては、

  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);
}
Example Example

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

心からオススメしたいRecommend

JavaScript

ライブラリ

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

2020/05/11

デザイン

便利ツール

「Google Sites」はワイヤーフレーム制作ツールとして使える？実際に触ってみた感想

2020/05/13

広告PR