Efecto fade in como Home de Google

La página principal de Google, lleva ya unos meses que lanzó ese efecto en el cual primeramente se carga una parte simple de su web, el logo, los dos botones de búsqueda y el campo de entrada. Una vez que movemos el ratón, el resto de enlaces y accesorios de su web aparecen con un efecto llamado “fade-in”. Llevaba tiempo queriendo implementar ese efecto en mi página. Si os habéis fijado al cargar esta web, no aparece la lista de post, hasta que no mueves el ratón.

A parte de crear un efecto estéticamente bonito (a mi entender) la carga de la página es ligeramente más rápida.

Efecto fade in como Home de Google

En Enlightenment, crearon un tutorial para crear un efecto con un JavaScript simple, por lo que no es necesario utilizar librerias como jQuery o MooTools. En este artículo, lo utilizan para mostrar u ocultar un div haciendo clic sobre un elemento.

Para el efecto que yo queria, ha sido tan fácil como cambiar unas simples funciones y especificar “onmouseover”. Podéis verlo funcionando aqui.

Acceder al tutorial.

Categoría(s): General, Programación

Etiquetas: fade-in, google, JavaScript, jquery, Mootools, onmouseover