マウスの動きに応じた波紋
マウスの動きに応じて波紋を表現する実装する方法をご紹介します。
- ※ CSS3に対応したブラウザのみ動作します。
- ※ 波紋が動作中はリンクなど押せなくなる場合がありますので、その際は消えるのを待ってから押してください。
サンプルコード
CSS
.wave {
position:fixed;
border:2px solid #000;
border-radius:50%;
width:0;
height:0;
opacity:1;
}JavaScript
(function() {
var maxSize = 50, // 要素の広がる最大の大きさ
addSize = 2, // 増加する大きさ
duration = 1000, // 1つの波の表示時間
delay = 60; // 次の波が出るまでの待機時間
var ratio = addSize / maxSize,
speed = ratio * duration;
window.addEventListener('DOMContentLoaded', function() {
/**
* 波を表示
* @param {object} event イベントオブジェクト
*/
var renderWave = function(event) {
var elem = document.createElement('div');
elem.classList.add('wave');
elem = document.body.appendChild(elem);
var size = 0,
x = event.clientX,
y = event.clientY,
opacity = 1;
elem.style.top = y + 'px';
elem.style.left = x + 'px';
var sid = setInterval(function() {
size += addSize;
x -= addSize / 2;
y -= addSize / 2;
opacity -= ratio;
elem.style.width = size + 'px';
elem.style.height = size + 'px';
elem.style.top = y + 'px';
elem.style.left = x + 'px';
elem.style.opacity = opacity;
if (size >= maxSize) {
clearInterval(sid);
elem.parentNode.removeChild(elem);
}
}, speed);
};
var wait = false;
window.addEventListener('mousemove', function(event) {
if (delay > 0) {
if (!wait) {
wait = true;
setTimeout(function() { wait = false; }, delay);
renderWave(event);
}
} else {
renderWave(event);
}
}, false);
window.addEventListener('click', function(event) {
renderWave(event);
}, false);
});
})();