2010-06-25 16 views
5

L'altro giorno mi è capitato di visitare questo sito: -Come posso creare questo effetto usando javascript?

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

Qualcuno può dirmi come posso creare questo effetto cool. So come scorrere la pagina orizzontalmente o verticalmente usando localScroll di JQuery. Ma se hai visto la pagina web, guarda attentamente come le linee scorrano sullo sfondo. Se qualcuno può dirmi come si che effetto creato sarò molto grato :)

risposta

4

PNG con trasparenza alfa, su uno sfondo:
http://www.peter-pearson.com/images/flow5.png
http://www.peter-pearson.com/images/stripey1.jpg

[EDIT]

non è proprio un'animazione, ma un piccolo trucco, basato sulla trasparenza.
Immaginate il seguente codice HTML:

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

div1 ha l'immagine di sfondo stripe-modello, posizionato come fisso, in modo che si muoverà quando si scorre.
div2 ha l'immagine di sfondo parzialmente trasparente, non fissa.

Così, quando si scorre la pagina, l'immagine del motivo apparirà in alcuni punti, perché l'altra immagine di sfondo è trasparente, dando una sorta di effetto di animazione.

+0

Grazie Macmade, ma come sembra che si stia animando? – TCM

+0

Non sono un designer. Per favore, spiegami il concetto dietro in modo poco dettagliato. Come si sta animando? – TCM

+0

Vedere la modifica ...:) – Macmade

0

si potrebbe desiderare di controllare questo post:

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

+0

ha già specificato che vuole un effetto di linea. Questa parte lo sa già. Prova a mettere a fuoco sul lato sinistro della pagina durante lo scorrimento. una bella linea sta seguendo la pagina –

+0

Ciao smeg4brains, lo so. Ma se guardi attentamente la pagina web, vedi le linee, le tre linee che vengono eseguite in background e come si animano. In realtà stavo parlando di questo. – TCM

Problemi correlati