ホバーした時に文字が増えたり減ったりするやつ(語彙力)(伝われ)をつくる

CSS

アニメーション

こんにちは、中の人です。
今回は、ホバーした時に文字列が変化するやつ(?)伸び縮みするやつ(?)の実装例をご紹介します。

AWWWARDSさんのサイトを見ていた時にヘッダーのロゴが面白い動きをしていたので、忘れないうちに備忘録を残したいと思いました。
ちなみに、こんな感じで動くやつです。

こんな感じになります

早速ですが、実装例になります。

下準備

まずはhover前のテキストを作っていきます。

「l」を擬似要素で表示するために「CodePoooooooo」と「l」に分けています。
「CodePoooooooo」に固定値widthを指定して文字が増える部分を”overflow: hidde;”で隠しています。
また、「CodePool」という文字列を定義するためにaria-label属性を使用します。

■HTML


■CSS
.header-logo {
	overflow: hidden;
	position: relative;
	transition: all .5s ease;
	width: 120px;
}
.header-logo a {
	display: block;
	overflow: hidden;
	transition: all .5s ease;
	width: 114px;
}
.header-logo a:after {
	content: 'l';
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
}

hoverした時の動きを加える

擬似要素で表示している「l」を右に移動させると同時に「CodePoooooooo」のwidthを変化させて隠れていた文字を表示させます。

■HTML


■CSS
.header-logo {
	overflow: hidden;
	position: relative;
	transition: all .5s ease;
	width: 120px;
}
.header-logo:hover {
	width: 215px;	
}
.header-logo a {
	display: block;
	overflow: hidden;
	transition: all .5s ease;
	width: 114px;
}
.header-logo:hover a {
	width: 210px;	
}
.header-logo a:after {
	content: 'l';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 6px;
}

心からオススメしたいRecommend

JavaScript

ライブラリ

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

CSS

擬似要素

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

広告PR