Un'interfaccia dinamica sul tuo sito attirerà l'attenzione degli utenti e aumenterà il traffico. Creare un'intestazione animata per un sito Web non è così difficile come sembra a prima vista.
Istruzioni
Passo 1
Proviamo a creare un'intestazione animata, che cambierà la sua configurazione quando il cursore del mouse passa sopra di essa. Ad esempio, un'immagine in bianco e nero in un'intestazione è stata convertita in colore durante l'interazione o modificata in un'altra.
Passo 2
Installa la libreria jQuery sul tuo computer dopo averla scaricata dal sito ufficiale (jquery.com).
Passaggio 3
Collega la libreria al tuo file html tra i tag head usando il tag script:
Passaggio 4
Seleziona due immagini che si sostituiranno a vicenda quando l'utente interagisce con l'intestazione. Se vuoi avere una transizione dal bianco e nero al colore, crea una copia dell'immagine e desaturala in Photoshop.
Passaggio 5
Crea un elenco di due elementi nel documento html e allega immagini a ciascuno utilizzando il tag immagine. Applicare una classe di stile all'elenco stesso, ad esempio
Passaggio 6
Fallo nel div responsabile dell'intestazione del tuo sito. Innanzitutto, specifica l'indirizzo dell'immagine che dovrebbe essere riflessa in uno stato statico, quindi quello che appare al passaggio del mouse.
Passaggio 7
Aggiungi class = "pervaya" alla prima immagine e class: "vtoraya" alla seconda immagine.
Passaggio 8
Nel file css allegato, specificare il posizionamento assoluto degli elementi (posizione: assoluto;), l'altezza e la larghezza fisse (altezza e larghezza) per queste classi.
Passaggio 9
Metti le immagini una sopra l'altra. Usa lo stile z-index per questo. Ti consente di allineare gli elementi lungo l'asse z, che si allontana da noi nella profondità dello schermo.
Passaggio 10
Per l'elenco stesso, specifica il rientro, l'allineamento di cui hai bisogno e rimuovi gli elementi dell'elenco (list-style-type: nessuno;).
Passaggio 11
Crea un file.js e incollaci il seguente codice:
$ (documento).ready (funzione () {
$ ("img.grey") al passaggio del mouse (funzione () {
$ (this).stop().animate ({"opacità": "0"}, "lento");
}, funzione () {
$ (this).stop().animate ({"opacità": "1"}, "lento");
});
});
Passaggio 12
Questo codice animerà la tua intestazione in azione. Non dimenticare di collegare il file.js al documento html.
