Efecto linterna

Viendo las diversas páginas que protestaron contra SOPA, encontré un efecto de linterna interesante en makarras.org.
Utilizaban unas sombras para el título que cambiaban con la posición del cursor y un efecto de linterna hecho con degradados de CSS 3 que también seguía el cursor.

El efecto de la linterna me pareció muy curioso y lo he replicado con una imagen de fondo PNG.

El código

    0 
    1 <div id="foco" class="foco">Rechaza SOPA</div>
    2 
    3 <style type="text/css">
    4 .foco {
    5 z-index:9999999;
    6 text-align:center;
    7 font-size:50px;
    8 position:fixed;
    9 top:0;
   10 left:0;
   11 right:0;
   12 bottom:0;
   13 background:url('IMAGEN') center center no-repeat;
   14 }
   15 </style>
   16 <script type="text/javascript">
   17 window.addEventListener('load',function(event) {
   18     document.getElementById('foco').addEventListener('mousemove', function(event){
   19 this.style.backgroundPosition = (event.clientX-2048)+'px '+(event.clientY-2048)+'px';
   20 }, false);
   21     document.getElementById('foco').addEventListener('click', function(event){
   22     this.style.display = 'none';
   23 }, false);
   24 
   25 },true);
   26 </script>
   27 
   28

La imagen

La imagen es un cuadrado negro de 4096x4096 píxeles con un degradado circular transparente en el centro de unos 500px de diámetro.Se puede utilizar directamente o empotrarla codificándola a su representación base-64.

Hace unas semanas, publicamos una herramienta online para convertir archivos, textos y urls a base-64. Puedes utilizarla en el siguiente enlace: http://www.treeweb.es/Herramientas/base64

Demo

Puedes encontrar la demostración del funcionamiento en ShareCode: http://www.treeweb.es/ShareCode/71f066762619a43652c9cf3bdff321bd/

linterna2.png