Rev. 2.73

Zach Johnson씨는 CSS와 자바스크립트를 사용하여 마우스 움직임에 반응하는 텍스트에 그림자가 비치는 효과를 절묘하게 표현했습니다. 이 데모는 아래의 짧막한 코드로 작동됩니다. 그러나 text-shadow CSS 프로퍼티를 지원하는 Safari, Firefox 3.5, Opera, Chrome 브라우저에서만 제대로 보인다는 점을 유념하세요.

var text;
var spot;

window.onload = function () {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;
    text = document.getElementById('tsb-text');
    spot = document.getElementById('tsb-spot')
}

function onMouseMove(e) {
    var xm = e.clientX - 300;
    var ym = e.clientY - 175;
    var d = Math.sqrt(xm*xm + ym*ym);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d / 5 + 10) + 'px black';
    
    xm = e.clientX - 600;
    ym = e.clientY - 450;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar