[CSS]実装がこれなら思っていたより簡単！グラデーションが変化する美しいエフェクトを実装するスタイルシート

サイト構築 -CSS

Post on:2019年3月7日

インスパイアされた美しいグラデーション

Groverにある遊び心溢れる美しいホバーエフェクトのアニメーションに、私は触発されました。ボタンの上でマウスを移動すると、カーソルの動きに合わせてカラフルなグラデーションが変化します。

アイデアはシンプルですが、その結果は非常に美しく印象的です。
まるでクリックされることを待っているように感じませんか？

私は同様のエフェクトが得られるボタンを実装してみました。
実装方法はあなたが考えるほど、難しくはありません。

グラデーションが変化するエフェクトの実装方法

HTML

HTMLはシンプルです。

<button class="button">
    <span>Hover me I'm awesome</span>
</button>

<span>Hover me I'm awesome</span>

</button>

JavaScript

JavaScriptでマウスの位置を取得します。

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
}

document.querySelector('.button').onmousemove = (e) => {

const x = e.pageX - e.target.offsetLeft

const y = e.pageY - e.target.offsetTop

e.target.style.setProperty('--x', `${ x }px`)

e.target.style.setProperty('--y', `${ y }px`)

}

要素を指定し、その要素までユーザーがマウスを動かすのを待ちます。
要素に対するマウスの位置を計算します。
その位置の座標をCSS変数に保存します。

たった6行のコードで、ユーザーがマウスを置いた位置をCSSに伝えることができます。この情報で達成できる効果の量は非常に大きいです。
次に、CSSを完成させましょう。

CSS

CSSのポイントは、アニメーションするグラデーションです。座標はCSS変数に格納されているので、CSSのどこででも使用できます。

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;
  span {
    position: relative;
  }
  &::before {
    --size: 0;
    content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }
  &:hover::before {
    --size: 400px;
  }
}

.button {

position: relative;

appearance: none;

background: #f72359;

padding: 1em 2em;

border: none;

color: white;

font-size: 1.2em;

cursor: pointer;

outline: none;

overflow: hidden;

border-radius: 100px;

span {

position: relative;

}

&::before {

--size: 0;

content: '';

position: absolute;

left: var(--x);

top: var(--y);

width: var(--size);

height: var(--size);

background: radial-gradient(circle closest-side, #4405f7, transparent);

transform: translate(-50%, -50%);

transition: width .2s ease, height .2s ease;

}

&:hover::before {

--size: 400px;

}

グラデーションが適切に表示されるように、テキストをspanの内側にラップします。
widthとheightを0pxから始めて、ボタンをホバーしたときに400pxにします。一瞬で表示されるようにtransitionを設定することを忘れないでください。
マウスの動きをたどるために座標を使用します。
backgroundにradial-gradientを適用し、最も近い側の円を使用します。これではみ出さずにbefore全体に満たされます。

実装したデモ

これで実装は完了しました。デモページでボタンを楽しんでください！

See the Pen
Mouse movement button with border-radius by Tobias Reich (@electerious)
on CodePen.

このエフェクトの可能性

マウスの位置に反応することで、たくさんの効果を作り出すことができます。
さまざまなアイデアが浮かびます。

例えば、これは私がbasicScrollで使ったのと同じアニメーションです。

May the hover be with you pic.twitter.com/2jrmVorLRW

— Tobias Reich (@electerious) 2018年1月28日

ボタンに視差効果を加えても面白いです。

3D parallax button with JS controlled CSS variables @CodePen 🎉 https://t.co/qE0woiNip8 pic.twitter.com/Wyi0xjRzPq

— Tobias Reich (@electerious) 2016年10月21日

その可能性は、無限大です。

よくある質問と答え

transform: scale()の代わりにwidthとheightをアニメーションさせるのはなぜですか？

widthとheightをアニメーションするときのパフォーマンスは良くありません。可能であれば、transformを使用するようにしてください。

それなのに、なぜ私はそうしなかったと思いますか？問題はブラウザがアクセラレータレイヤーで要素を（変換中に）レンダリングしていることです。ボタンに四角形以外の端がある場合、このレイヤーは問題を起こす可能性があります。

transformを使用する方法もありますが、ブラウザの中にはそれを好まないものがあります。transformにtransitionを適用しないことが1つの解決策です。これらのクリッピング問題を解決するかもしれないSafariのための回避策もあります。
参考: Safari border-radius + overflow: hidden + CSS transform fix