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

最近ではグラデーションの使い方がいろいろ進化しています。中でも、ホバーやスクロールに合わせて、グラーデションが変化するエフェクトは非常に美しく、一度は試してみたい実装だと思います。

ホバーすると、マウスの動きに追従してグラデーションが変化するボタンを実装するスタイルシートのテクニックを紹介します。
実装は非常に簡単で、応用も利くので、ぜひお試しください。

CSS変数による美しいホバーエフェクトを与えたボタン

Stunning hover effects with CSS variables
by Tobias Reich



下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

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

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

CSS変数による美しいホバーエフェクトを与えたボタン

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

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

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

HTML

HTMLはシンプルです。

JavaScript

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

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

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

CSS

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

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

実装したデモ

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

このエフェクトの可能性

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

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

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

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

よくある質問と答え

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

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

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

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

ボタンのキャプチャ

アクセラレータレイヤーとborder-radiusにより起こる問題

transform: scale()の代わりにtopとbottomに変えるのはなぜですか?

上記の説明を参照ください。

sponsors

top of page

©2019 coliss