2010-06-25 12 views
5

El otro día me acaba de pasar a visitar este sitio: -¿Cómo creo este efecto usando javascript?

http://www.peter-pearson.com/

Alguien puede decirme cómo puedo crear este efecto fresco. Sé cómo desplazar horizontal o verticalmente la página usando localScroll de JQuery. Pero si ha visto la página web, mire cuidadosamente qué bellamente las líneas se extienden sobre el fondo. Si alguien me puede decir cómo se creó ese efecto seré muy agradecido :)

Respuesta

4

PNG con transparencia alfa, sobre un fondo:
http://www.peter-pearson.com/images/flow5.png
http://www.peter-pearson.com/images/stripey1.jpg

[EDIT]

no es realmente una animación, pero un pequeño truco, basado en la transparencia.
Imagine el siguiente código HTML:

<div class="div1"> 
    <div class="div2"> 
    </div> 
</div> 

div1 tiene la imagen de fondo franja de patrón, posicionado como fijo, por lo que se moverá cuando se desplaza.
div2 tiene la imagen de fondo parcialmente transparente, no corregida.

Así que cuando se desplaza por la página, la imagen del patrón aparecerá en algunos lugares, porque la otra imagen de fondo es transparente, lo que le da un tipo de efecto de animación.

+0

Gracias Macmade, pero ¿cómo se ve que está animando? – TCM

+0

No soy un diseñador. Por favor, explícame el concepto detrás de esto con poco detalle. ¿Cómo está animando? – TCM

+0

Ver la edición ...:) – Macmade

0

es posible que desee comprobar este post:

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

+0

ya ha especificado que quiere un efecto de línea. Esta parte ya lo sabe. Intenta enfocarte en el lado izquierdo de la página mientras te desplazas. una hermosa línea está siguiendo la página –

+0

Hola smeg4brains, lo sé. Pero si mira cuidadosamente la página web, vea las líneas, las tres líneas que se ejecutan en segundo plano y cómo se animan. De hecho, estaba hablando de eso. – TCM

Cuestiones relacionadas