Tag Archives: efecto

Scrolling Background Effect

El efecto de cabecera de youlove.us es uno de los más bonitos que he visto últimamente.

scrolling-background

La técnica usada es de lo más simple, una imagen de 4000px de alto deslizándose por detrás de un png con fondo transparente. El fondo lo mueven mediante jquery acompañado del plugin backgroundposition.js de Alexander Farkas.

En el blog de la página encontramos un artículo donde comparten y explican el código javascript.

Si habéis seguido el videotutorial “efecto zoom con jquery” no tendréis ningún problema para entenderlo, hace uso de la propiedad background-position de css para crear la animación.

webtips 05 – Efecto zoom

Quinta entrega de webtips. Con este vídeo entramos en la recta final de la serie ya que en septiembre comenzará un nuevo curso sobre seguridad web.

Si queréis podéis dejar algún comentario explicando que os ha parecido la serie de vídeos, si os gustaría que explicara alguna cosa más, profundizar más en algún tema/apartado… lo que queráis.

Tenéis la opción de descargar el vídeo (142 mb – 1440×900px) y el código.

NOTA:
En el código descargable la propiedad opacity del <div id=”cursor”> es asignada mediante javascript en lugar de css.
El código ha sido testeado y funciona correctamente bajo Mozilla Firefox 3.0/3.5 preview, Google Chrome e Internet Explorer 8.


Read more