CSS3 + jQueryによる、グラデーションのホバー効果
Windows8のタスクバーのアイコンをマウスでホバーしたときに見られる、
マウスを中心にグラデーションした効果が面白いと思ったので、
CSS3とjQueryを使って、それっぽいものを作ってみました。
↓こちらがデモです
HTML
|
1 2 3 4 5 6 7 | <ul> <li><a href=""#>HOME</a></li> <li><a href=""#>LIST</a></li> <li><a href=""#>PRODUCT</a></li> <li><a href=""#>ABOUT</a></li> <li><a href=""#>CONTACT</a></li> </ul> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | ul{ width: 700px; margin: 0 auto; } ul li{ width: 120px; height: 60px; font-family: Arial, Helvetica, sans-serif; font-size: 20px; list-style: none; margin: 10px; text-align: center; float: left; } ul li a{ display: block; width: 118px; height: 58px; background: #ff4705; border-radius: 8px; border: solid 1px #ff6405; line-height: 60px; text-decoration: none; color: #fff; } |
HTMLとCSSは通常通りにします。
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | $(function(){ //関数の実行 gradientBox("ul li a"); //gradientBox([効果をつける要素のセレクタ]); function gradientBox(target){ var target = $(target); target.on("mousemove touchmove", function(e){ //マウスが指定した要素上で動いたら実行 var startClr = "#ffb76b"; //グラデーションの開始色 var middleClr = "#ff6405"; //グラデーションの途中色 var endClr = "#ff4705"; //グラデーションの終了色 //要素の大きさを取得 var boxWidth = $(this).width(); var boxHeight = $(this).height(); //要素上のマウス座標を取得 var mx = e.clientX - $(this).offset().left; var my = e.clientY - $(this).offset().top; //要素上のマウス座標を%に変換 var prx = (mx / boxWidth) * 100; var pry = (my / boxHeight) * 100; //ブラウザごとにグラデーションの指定方法を変更 var ua = navigator.userAgent.toLowerCase(); if(ua.indexOf("safari") != -1 || ua.indexOf("chrome") != -1 || ua.indexOf("ipad") != -1 || ua.indexOf("ipod") != -1 || ua.indexOf("iphone") != -1 || ua.indexOf("android") != -1){ //グラデーションをCSSで指定 $(this).css({ "background" : "-webkit-radial-gradient(" + prx + "% " + pry + "%, ellipse farthest-side, " + startClr + " 0%, " + middleClr + " 60%, " + endClr + " 100%)" }); }else if(ua.indexOf("firefox")){ $(this).css({ "background" : "-moz-radial-gradient(" + prx + "% " + pry + "%, ellipse farthest-side, " + startClr + " 0%, " + middleClr + " 60%, " + endClr + " 100%)" }); }else{ $(this).css({ "background" : "radial-gradient(" + prx + "% " + pry + "%, ellipse farthest-side, " + startClr + " 0%, " + middleClr + " 60%, " + endClr + " 100%)" }); } }).on("mouseout touchout", function(){ //マウスが指定した要素から離れたら実行 $(this).css("background", "#ff4705"); }); } }); |
基本的な仕組みは、要素上のマウス座標を取得して、要素上のマウス座標をパーセントに変換して、
CSS3のbackground: radial-gradientの中心の場所を当てはめるというシンプルなものです。
ちなみにCSS3での放射状グラデーションの指定方法は、
background: radial-gradient([中心の位置(横方向)] [中心の位置(縦方向)], 形状 サイズ, 開始色 位置, 途中色 位置, 終了色 位置);
ですので、今回は中心の位置に、マウスの位置を当てはめて効果をつけています。
radial-gradientの中心位置は、割合で指定する必要があるので、パーセントに変換しています。
ブラウザごとに若干指定方法が変わってくるので、指定方法の振り分けも行っています。
Author Profile
SHARE
