Uma interface dinâmica em seu site chamará a atenção dos usuários e aumentará o tráfego. Fazer um cabeçalho animado para um site não é tão difícil quanto parece à primeira vista.
Instruções
Passo 1
Vamos tentar fazer um cabeçalho animado, que mudará sua configuração quando o cursor do mouse estiver passando sobre ele. Por exemplo, uma imagem em preto e branco em um cabeçalho foi convertida para colorida na interação ou alterada para outra.
Passo 2
Instale a biblioteca jQuery em seu computador depois de baixá-la do site oficial (jquery.com).
etapa 3
Vincule a biblioteca ao seu arquivo html entre as tags head usando a tag script:
Passo 4
Selecione duas imagens que se substituirão quando o usuário interagir com o cabeçalho. Se você deseja fazer uma transição de preto e branco para colorido, crie uma cópia da imagem e remova a saturação no Photoshop.
Etapa 5
Crie uma lista de dois itens no documento html e anexe imagens a cada um usando a marca de imagem. Aplique uma classe de estilo à própria lista, por exemplo
Etapa 6
Faça isso no div responsável pelo cabeçalho do seu site. Primeiro, especifique o endereço da imagem que deve ser refletida em um estado estático e, em seguida, aquele que aparece ao passar o mouse.
Etapa 7
Adicione class = "pervaya" à primeira foto e class: "vtoraya" à segunda foto.
Etapa 8
No arquivo css anexado, especifique o posicionamento absoluto dos elementos (posição: absoluto;), altura e largura fixas (altura e largura) para essas classes.
Etapa 9
Coloque as fotos em camadas uma sobre a outra. Use o estilo Z-index para isso. Ele permite que você alinhe elementos ao longo do eixo z, que se afasta de nós na profundidade da tela.
Etapa 10
Para a lista em si, especifique o recuo, o alinhamento de que você precisa e remova os itens da lista (list-style-type: none;).
Etapa 11
Crie um arquivo.js e cole o seguinte código nele:
$ (document).ready (function () {
$ ("img.grey"). hover (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Etapa 12
Este código animará seu cabeçalho em ação. Não se esqueça de conectar o arquivo.js ao documento html.
