Spotlight

by XTREME104

HTML

<script>
    window.onload = function () {
    var text = document.getElementById('tsb-text');
    var spot = document.getElementById('tsb-spot');
    var box = document.getElementById('tsb-box');
    
    if (typeof box.style.webkitBoxShadow == 'string') {
    boxProperty = 'webkitBoxShadow';
    } else if (typeof box.style.MozBoxShadow == 'string') {
    boxProperty = 'MozBoxShadow';
    } else if (typeof box.style.boxShadow == 'string') {
    boxProperty = 'boxShadow';
    }
    
    if (text && spot && box) {
    document.onmousemove = onMouseMove;
    
    document.ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
    }
    
    onMouseMove({clientX: window.innerWidth / 2, clientY: window.innerHeight / 2});
    }
    
    function onMouseMove(e) {
    xm = e.clientX - (window.innerWidth / 2);
    ym = e.clientY - (window.innerHeight / 2);
    var d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
    text.style.textShadow = -xm + 'px ' + -ym + 'px ' + (d + 10) + 'px black';
    
    if (boxProperty) {
    box.style[boxProperty] = '0 ' + -ym + 'px ' + (d + 30) + 'px black';
    }
    
    xm = e.clientX - window.innerWidth;
    ym = e.clientY - window.innerHeight;
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
    }
</script>


<div id="text-shadow-box">
    <div class="wall">
        <div id="tsb-box"></div>
        <p id="tsb-text">Text Shadow</p>
        <div></div>
    </div>
    <div id="tsb-spot"></div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
}

#text-shadow-box {
    position: relative;
    width: 598px;
    height: 406px;
    background: #666;
    overflow: hidden;
    cursor: none;
    border: 1px solid #333;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-user-select: none;
}

#text-shadow-box div.wall {
    position: absolute;
    top: 175px;
    left: 0;
    width: 100%;
}

#tsb-text {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    color: #999;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 80px;
    line-height: 0.5em;
    height: 1px;
    font-weight: bold;
    text-align: center;
}

div.wall div {
    position: absolute;
    background: #999;
    top: 42px;
    left: 0;
    height: 300px;
    width: 100%;
}

#tsb-box {
    left: -100px;
    width: 800px;
}

#tsb-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background: url(spotlight.png) center center;
    background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0%, black 60%);
    background: -webkit-gradient(radial, center center, 0, center center, 250, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
}