- Artigos
- Javascript
- Dinheiro
- Joomla
- Design
- Wordpress
Fade IN/OUT com Mootools 1.2
02 Outubro 2008
Depois de ter apresentado no meu ultimo post como criar um efeito de fade in/out com scriptaculous, houveram alguns comentários a sugerir mudanças. Comentários que achei bastante válidos e decidi criar algo em mootools 1.2.
O efeito do fade in/out é virtualmente igual ao efeito criado com o scriptaculous, no entanto apresenta algumas vantagens. Uma delas é o tamanho da framework, e outra é o facto de que se o javascript do browser estiver desactivado as caixas de login continuam a aparecer.
Esta é uma das razões pela qual a framework Mootools é uma das minhas preferidas para desenvolver com javascript. No entanto muitas vezes os clientes já possuem soluções implementadas com outras frameworks.
Mas mão na massa!
Passo 1: Javascript
Faça o load da framework Mootools 1.2 antes de </head> no seu html:
antes de </head> coloque ainda o seguinte código:
window.addEvent('domready', function() {
var t = $('divLogin');
$('divLogin').setOpacity(0);
$('mudaopacidade').addEvent('click', function(x) {
// parar de propagar evento
x.stop();
t.fade('out');
t.fade('in');
t.fade('toggle');
});
});
</script>
Passo 2: Código HTML
<div id="divLogin" >Nick <input name="" type="text" /> Password <input name="" type="text" />
</div>
Passo 3:
Posicione os elementos à sua escolha com CSS
Possui ideas para implementar no script? Ou ideias para novos efeitos? Partilhe-as comigo.... Pode aproveitar ainda para subscrever o FeedRSS.
TrackBack URI for this entry
Continuando na mesma "onda" do ultimo artigo sobre design publicado no WebLouca, Como criar madeixas...
Para quem não sabe o JW Player (http://www.longtailvideo.com/players/jw-flv-player/) é um player f...
Deseja criar um header mais atractivo para o seu website? Deseja criar um Logótipo, diferente do n...
A par do Wordpress (/wordpress) o Joomla é um dos mais utilizados gestores de conteúdos da actuali...
Anda à procura de uma solução simples e gratuita para colocar vídeos flash no seu website? Talve...
Neste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
Atualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
A pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Redimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
No inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...
Outubro 31, 2008