Estos días está todo el mundo conjeturando acerca de las intenciones y significados de los últimos doodels. Más allá de sus motivos (supongo que hacer ruido) el efecto es cuánto menos curioso y muy sencillo de replicar:
¿Cuál es el truco? No hay Flash, ni Silverlight ni nada complicado detrás de este efecto: simplemente tenemos dos divs con su background establecido a la misma imagen, una de ellas en color y la otra en gris. El único truco de este efecto es una función de javascript que responde al evento onkeyup(this.value.length) que envía el número de caracteres del cuadro de texto para redimensionar el div que contiene la imagen en color.
function SetFrontWidth(value)
{
var div1=document.getElementById(‘divK’);
var longitud=Math.round(700*value/6);
if(longitud>580)
longitud-=20;
div1.style.width=longitud;
}
{
var div1=document.getElementById(‘divK’);
var longitud=Math.round(700*value/6);
if(longitud>580)
longitud-=20;
div1.style.width=longitud;
}
Para más detalle se puede bajar el código completo de este ejemplo (no utiliza css ni código externo alguno).