Categorias
tutorial

Tutorial – Como criar um banner Pushdown

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.

  • Animações em GWD,  Adobe Edge, e demais ferramentas de animação não são compatíveis.

1. Faça o download do template no link abaixo:

PushDown

***Apenas modificar arquivos que estão sendo referenciados no tutorial,  não alterar outras pastas e arquivos ou excluir elementos do template.***

Painel fechado

Se as especificações do portal tiver dimensões diferentes do template, altere conforme os itens abaixo.

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

html parte fechada

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.

banner css

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.

script js

Painel aberto

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

index html painel aberto

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

css da parte aberta

4.3. No arquivo script.js do diretório “panels/default/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.

script js parte aberta

Formato com Vídeo

5.1 Para montar um formato com vídeo, é necessário ter efetuado o download do template e ter feito os passos acima.

5.2 No arquivo index.html do diretório “panels/default” existe um codigo HTML pronto que efetua a chamada do vídeo.

Video

5.3 Para que o vídeo funcione os arquivos deverão estar  dentro do diretório “panels/default/videos” em dois formatos MP4 e WEBM, para alterar o vídeo que é exibido no banner basta substituir os arquivos, como no exemplo abaixo:

TrocaVideo

5.4 Depois de efetuar a inserção do vídeo vá ao diretorio “panels/default/styles/” e altere o arquivo “style.css” de acordo com o tamanho e posicionamento desejado.

StyleVideo