MooSlide - painel deslizante

Escrito por Gonçalo Martins

Com este artigo pretendo exemplificar como se cria um slide parecido com aquele que se encontra no topo deste site... Altamente personalizavel, através de CSS e do código no Script, esta pode ser a solução para muitos websites.

Mãos à obra!

Passo 1: Scripts!

Inserir antes do </head> do seu site a chamada ao mootools e ao script MooSlide(o qual terá que colocar no seu servidor)

Passo 2: Código de Chamada

Colar o código de implementação (chamada) no seu site

'toggle' vai ser o futuro 'id' do link de chamada, enquanto que 'test' é o id do <div> que contem o conteúdo a aparecer no slide.

No código acima pode ainda definir:

A velocidade do slide;
A velocidade do "fade out";
Remover no click sim/nao;
A opacidade;
A altura do slide;
Orientação do slide: 'top' ou 'bottom'.

Passo 3: Link de chamada

<a href="#" id="toggle">Toggle slider 1</a>

Passo 4: Criar Slide

Criar o Slide e o seu conteúdo

<div id="test" class="mooslide">
#O conteudo que deseja....
</div>

Passo 5: Css

.mooSlide {
    background-color:#000;
   padding: 10px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 16px;
   color: #FFFFFF;
   font-size: 11px;
}

Download dos ficheiros referidos no artigo:
mooSlide.zip	[(scripts, css, html)]	24 Kb

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Lucas Outubro 03, 2008	caramba com este mootools da pra coisa pra caramba.. Ficou muito legal este mooslide!! vlw amigo..


jeton Outubro 16, 2008	perfect thanks for sharing...

Escreva o seu Comentario

Gonçalo Martins

Freelancer, Fan de Desing, Praticante KickBoxing e Blogger nos tempos livres.

Ferramentas WebLouca: JSPacker | CSSPacker

Têm conhecimentos? Escreva um guest post! +info

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteúdo apresentado.
Não existe recompensa monetária, mas escrever um artigo de qualidade no WebLouca é uma excelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Sinta-se livre para me contactar e expor as suas ideias.

Patrocinadores do Site

Subscrever Feed

Tens Talento?

^{- fechar caixa contacto -}

Considera escrever um guest post no weblouca!

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteudo apresentado.
Não existe recompensa monetaria, mas escrever um artigo de qualidade no WebLouca é uma exelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Contacte-me e exponha-me as suas ideias.

^{- caixa contacto -}