fei-d, a pequena biblioteca .js

Deixe um comentário

Janeiro 29, 2013 por Firmino Changani

fei-d

Em tempos estive a planejar o meu personal website e a pensar no UI/UX do mesmo, cheguei a um dado ponto onde teria que usar alguns efeitos em elementos da pagina, no caso o fade-in e o fade-out muito famosos por causa do jQuery.

Aplicar estes efeitos por meio do jQuery é extremamente fácil, mas eu não queria usar este framework no meu website. Afinal de contas com as tecnologias que hoje possuímos não há motivos para usarmos o jQuery pra realizar apenas fade-in e out, estaríamos a usar apenas 2% do que ele nos oferece.

Eu queria algo muito simples, então decidi criar uma pequena biblioteca que realizasse o fade-in e out utilizando css3(opacity/transition). Eis o fei-d.js uma lib. que permite aplicar o efeito fade-in e fade-out em elementos html.

COMO USAR

A sua sintaxe é: feid(elemento, duração).

Elemento: consiste num elemento html na qual nos pretendemos aplicar o efeito.

Duração: é o valor que determina o tempo de duração da animação

Exemplo1:

<section id="meuElemento"></section>

var meuEle = document.getElementById('meuElemento');

feid(meuEle, 2) ;

Só assim não basta para aplicar efeitos num elemento, temos que definir se desejamos fade-in ou out, por este motivo a lib. tem dois métodos: on() e o off().

on(): Representa o fade-in, ou seja efeito de entrada.

off(): Representa o fade-out, efeito de saída.

Exemplo2:

//fade-in de um elemento

var efeito = feid(meuEle, 2);

efeito.on();

//fade-out de um elemento

var efeito = feid(meuEle, 2);

efeito.off();

O fei-d.js é open-source e qualquer um pode contribuir para a sua melhoria, ele está no github juntamente com a licença WFTPL ou DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE.

Anúncios

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: