L'effetto di parallasse è un illusione che si crea quando lo spettatore è in movimento e gli oggetti possono essere visti sembrano muoversi più lentamente, in lontananza, mentre gli oggetti che sono più vicini allo spettatore sembrano muoversi molto più velocemente. Un esempio pratico potrebbe essere quando si è a cavallo in una macchina a guardare fuori dalla finestra su una strada, e poi ci si accorge gli oggetti più vicino a voi come un recinto che si spostano da subito, mentre i cavalli in una mossa campo più lento e gli oggetti al di là di loro come una collina, ha vinto ' t sembrano muoversi a tutti. Vi è una differenza di orientamento degli oggetti che vedete. Web designer hanno cominciato a usare questo effetto su vari siti web ed è un'illusione interessante grafico che aggiunge un punto di interesse sul tuo sito web quando si ridimensiona la finestra del browser. Per creare lo sfondo 3D con un effetto di parallasse sul tuo sito web avrete bisogno di usare Photoshop e codici CSS.
- Selezionare un tema. Scegli il tema e le immagini che si desidera creare un effetto di parallasse. Avrai bisogno di almeno tre strati di immagini per creare il design 3D sfondo, con un effetto di parallasse. È possibile creare un'immagine di sfondo con i fiocchi di neve di varie forme e dimensioni.
- Preparare le immagini e livelli di Photoshop.Quando avete il vostro tema e immagini pronte, aprire il tuo programma Photoshop e caricare le immagini in diversi strati. In questo esempio abbiamo un tema invernale con fiocchi di neve che contribuirà a creare l'effetto di parallasse. Si dovrebbe avere 3 immagini e ciascuno di essi sarà nei loro rispettivi strati. Il primo strato conterrà l'immagine di sfondo. Questa è l'immagine più lontano dallo spettatore in modo da avere i fiocchi di neve più piccola sulla cima di un sfondo di colore azzurro. Il secondo strato conterrà l'immagine a metà campo, fiocchi di neve che saranno leggermente più grande. Poi il terzo e ultimo strato conterrà l'immagine in primo piano o la foto più grande.
- Salva i livelli nel formato corretto.Saremo risparmio ogni immagine in formato PNG 24. Così, quando hai finito di perfezionare le vostre immagini e felice con i risultati, salvo ogni immagine in formato PNG 24. Prima salvare l'immagine di sfondo, ma prima di salvare, spegnere il pulsante visibile in primo piano e gli strati midground sulla palette Livelli. Quindi l'immagine sarà visibile solo lo sfondo blu con piccoli fiocchi di neve su di esso. Vai a Salva per Web e dispositivi e selezionare Salva, assicurarsi che sia in formato PNG 24 e il nome background.png. Avanti, selezionate il livello midground immagine e renderla visibile selezionando la casella accanto ad essa la visibilità. Dal momento che abbiamo bisogno di fare questo strato trasparente abbiamo bisogno di disattivare il pulsante di visibilità e immagine di sfondo il colore di sfondo. Quindi l'unica immagine visibile è di medie dimensioni fiocchi di neve, senza uno sfondo. Salvare il livello midground allo stesso modo si è salvato il livello di sfondo. Il nome è midground.png. Ultimo noi salveremo lo strato di primo piano, attivare il pulsante di livello in primo piano la visibilità e disattivare il tasto midground visibilità. Modo che l'immagine è visibile solo l'immagine di primo piano o l'immagine più grande fiocco di neve, senza sfondo. Seguono lo stesso processo di risparmio e il nome foreground.png.
- Creare il codice HTML e CSS. Andare al file index.html e creare div per il primo piano e le immagini midground. Gli elementi div andrà tra i tag del corpo in modo che sarà simile a questa:
<body>
id="midground"> <div </ div>
id="foreground"> <div </ div>
</ body>
Ora vai al tuo style.css file e mettere il seguente codice nel tag body:
body (
background: url (images / background.png) Ripetere 5% 5%;
)
# midground (
background: url (images / midground.png) repeat 30% 80%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 997;
)
# (primo piano
background: url (images / foreground.png) repeat 105% 120%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 998;
)
Il codice CSS sarà lo stile della midground e le immagini in primo piano, con il posizionamento assoluto e percentuali di ripetizione. Le percentuali di ripetizione di controllo della velocità orizzontale e verticale di circolazione di ogni immagine. Noterete la nostra percentuale di primo piano sono superiori al 100%, questo significa che si muoverà a un ritmo più veloce di tasso della finestra del browser quando si è ridimensionato. Ora è possibile testare il vostro tema nel tuo browser.
Delicious
Digg
Google
Yahoo
