アニメーション
css_animation
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 ポイントとしては、 親要素に固定値heightと"overflow: hidden;"を指定 子要素を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の値を変更して、お好みの押し出し方向にして使ってみてください。
2020/04/28
ホバーした時に文字が増えたり減ったりするやつ(語彙力)(伝われ)をつくる
こんにちは、中の人です。 今回は、ホバーした時に文字列が変化するやつ(?)伸び縮みするやつ(?)の実装例をご紹介します。 AWWWARDSさんのサイトを見ていた時にヘッダーのロゴが面白い動きをしていたので、忘れないうちに備忘録を残したいと思いました。 ちなみに、こんな感じで動くやつです。 早速ですが、実装例になります。 下準備 まずはhover前のテキストを作っていきます。 「l」を擬似要素で表示するために「CodePoooooooo」と「l」に分けています。 「CodePoooooooo」に固定値widthを指定して文字が増える部分を"overflow: hidde;"で隠しています。 また、「CodePool」という文字列を定義するためにaria-label属性を使用します。 ■HTML CodePoooooooo ■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; } CodePoooooooo hoverした時の動きを加える 擬似要素で表示している「l」を右に移動させると同時に「CodePoooooooo」のwidthを変化させて隠れていた文字を表示させます。 ■HTML CodePoooooooo ■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; } CodePoooooooo
2020/04/20
下線テキストにホバーアニメーションを実装する方法
こんにちは、中の人です。 今回は、テキストの下線にホバーアニメーションを実装する方法をご紹介します。 もくじIndex 下準備 サンプル1 – 「transform: scale();」でサイズを可変してみる サンプル2 – 「transform-origin」でhover前とhover後の動きに差を付けてみる サンプル3 – 「transform: translate();」と「opacity」でフワッと表示させる 解説 下準備 まずは、擬似要素を用いてaタグに下線を表示させます。 この時、borderプロパティではなくbackgroundプロパティで表示させます。 ■HTML テキストリンク ■CSS .example-0 { line-height: 2.5em; position: relative; } .example-0:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; height: 1px; width: 100%; } テキストリンク アニメーションを実装する サンプル1 - 「transform: scale();」でサイズを可変してみる ■HTML テキストリンク ■CSS .example-1 { line-height: 2.5em; position: relative; } .example-1:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transition: transform .5s ease; height: 1px; width: 100%; } .example-1:hover:after { transform: scaleX(1); } テキストリンク サンプル2 - 「transform-origin」でhover前とhover後の動きに差を付けてみる ■HTML テキストリンク ■CSS .example-2 { line-height: 2.5em; position: relative; } .example-2:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: right; transition: transform .5s ease; height: 1px; width: 100%; } .example-2:hover:after { transform: scaleX(1); transform-origin: left; } テキストリンク サンプル3 - 「transform: translate();」と「opacity」でフワッと表示させる ■HTML テキストリンク ■CSS .example-3 { line-height: 2.5em; position: relative; } .example-3:after { content: ''; background: rgba(0, 0, 0, .5); position: absolute; bottom: 0; left: 0; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; height: 1px; width: 100%; } .example-3:hover:after { opacity: 1; transform: translateY(0); } テキストリンク 解説 今回は、擬似要素をtransformプロパティでサイズや位置を可変させる方法をご紹介しました。 もちろん、過去の記事でご紹介したborderプロパティで下線を表示させる方法にも適用できます。 テキストリンクの下線を擬似要素を用いて表示させる方法
