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