Categorias
tutorial

Tutorial – Como criar um banner expansível

Os tutoriais para as ferramentas listadas abaixo estão disponíveis em inglês:

ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.

1. Desenvolva a animação das partes fechada e aberta em dois projetos distintos.

2. Faça o download de um dos templates:Download – Template expansível 728×90 | 728×300 (Sem vídeo)Download – Template expansível 728×90 | 728×300 (Com vídeo)Download – Template expansível 728×90 | 728×300 (Com vídeo com botão fechar)

Painel fechado

3.1. No arquivo index.html da raiz do diretório principal insira o código HTML no local indicado.

3.2. No arquivo style.css do diretório “styles” altere as dimensões da div #banner. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

3.3. No arquivo script.js do diretório “scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.

Painel aberto

4.1. No arquivo index.html do diretório “panels/expand” insira o código HTML no local indicado. Altere as informações de altura e largura do painel.

4.2. No arquivo style.css do diretório “panels/expand/styles” altere as dimensões da div #expansion. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.

4.3. No arquivo script.js do diretório “panels/expand/scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.