Blog

CSS3 + jQueryによる、グラデーションのホバー効果

2013.07.09Cat:css3 jQuery デザイナー

Windows8のタスクバーのアイコンをマウスでホバーしたときに見られる、

マウスを中心にグラデーションした効果が面白いと思ったので、

CSS3jQueryを使って、それっぽいものを作ってみました。

 

↓こちらがデモです

DEMO

 

HTML

 

CSS

HTMLとCSSは通常通りにします。

 

JavaScript

 

基本的な仕組みは、要素上のマウス座標を取得して、要素上のマウス座標をパーセントに変換して、

CSS3のbackground: radial-gradientの中心の場所を当てはめるというシンプルなものです。

 

ちなみにCSS3での放射状グラデーションの指定方法は、

 

background:  radial-gradient([中心の位置(横方向)] [中心の位置(縦方向)], 形状 サイズ, 開始色 位置, 途中色 位置, 終了色 位置);

 

ですので、今回は中心の位置に、マウスの位置を当てはめて効果をつけています。

radial-gradientの中心位置は、割合で指定する必要があるので、パーセントに変換しています。

 

ブラウザごとに若干指定方法が変わってくるので、指定方法の振り分けも行っています。

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ