Olá a todos. Desta vez apresento a vocês um novo
recurso que desenvolvi (e continuarei aprimorando) afim de facilitar
o trabalho com efeitos de opacidade em elementos HTML. A idéia é fazer
isso de forma simples, rápida, fácil e prática.
Então, com essa intenção criei o w3Opacity –
versão atual 1.0 – que, como falei anteriormente, são
recursos em JavaScript para você trabalhar com efeitos
de opacidade em elementos HTML.
Com o w3Opacity você precisará apenas
de uma linha de código para realizar efeitos como Fade
Out, Fade In, Toggle de fade, definir opacidade e consultar a
opacidade de elementos HTML.
Para iniciar o trabalho com o w3Opacity,
você precisará baixá-lo e
inserí-lo em sua página como demonstrado abaixo:
Faça o download do w3Opacity
1.0
Como você percebeu na imagem de exemplo acima, incluímos
o arquivo JavaScript referente ao w3Opacity através
da tag script e a inserimos dentro da tag head.
Feito isso, poderemos ter acesso aos métodos oferecido
pelo w3Opacity.
Vamos conhecê-los:
Nota: antes de conhecer os métodos disponíveis
no w3Opacity, você poderá vê-los em ação
na página
de demonstração do w3Opacity.
w3Opacity.fading()
Através do método fading, poderemos realizar efeitos
como Fade Out e Fade In em elementos HTML. Vejamos como proceder:
Fade Out
w3Opacity.fading(‘id_do_objeto’,100,0,500);
Fade In
w3Opacity.fading(‘id_do_objeto’,0,100,500);
Os parâmetros do método fading são os seguintes:
- strObjId {string} – Nome do atributo ID
do objeto que receberá o efeito; - intOpacityStart {number} – Número
inicial para o efeito; - intOpacityEnd {number} – Número final
para o efeito; - intMillisecond {number} – Número
(em milisegundos) para o tempo de duração do
efeito - fnOnFinish {} – Função a ser
chamada quando o efeito terminar
A diferença entre o Fade Out e o Fade In – ambos
realizados através do método fading – consiste
no número da opacidade inicial e final, ou seja, se
a opacidade inicial for maior que a final, teremos um Fade
Out, caso contrário um Fade In.
Em ambos os exemplos acima, utilizamos apenas os quatro primeiros
parâmetros do método fading. O quinto parâmetro é bem
interessante e consiste no seguinte: ao informar esse parâmetro
– que deve ser o nome de uma função existente –
o método fading irá chamar uma função
com o nome especificado no parâmetro quando o efeito – Fade
Out ou Fade In – finalizar. Por exemplo:
w3Opacity.fading(‘id_do_objeto’,0,100,500,fazer_alguma_coisa);
A função fazer_alguma_coisa será chamada
quando o Fade In (neste caso do exemplo) for concluído.
w3Opacity.toggle()
O método toggle é bem interessante, e consiste
na realização de um Fade Out ou Fade in; dependendo
do estado de opacidade do elemento HTML. Ele (método)
saberá quando realizar um Fade Out ou Fade In. Como? Simples,
ele consulta a opacidade do elemento, se tal elemento estiver
invisível será realizado um Fade In, caso contrário
um Fade Out.
Para o método toggle são necessários apenas
dois parâmetros:
- strObjId {string} – Nome do atributo ID do objeto que receberá o
efeito; - intMillisecond {number} – Número (em milisegundos)
para o tempo de duração do efeito
Um exemplo de uso:
w3Opacity.toggle(‘id_do_objeto’,500);
Nesse caso, o elemento HTML com o ID igual a id_do_objeto sofrerá um
efeito de Fade Out ou Fade In; esse efeito terá uma duração
de meio segundo. Visto que o tempo do efeito – o segundo
parâmetro – é informado em milisegundos, então
500/1000 é igual à 0,5.
w3Opacity.set()
Em alguns momentos, você precisará apenas definir
a opacidade de um elemento e nada mais; para isso,utilize o método
set. Assim:
w3Opacity.set(‘id_do_objeto’,15);
ou seja, o elemento HTML com o ID igual a id_do_objeto ficará com
15% de opacidade.
w3Opacity.get_opacity()
Em dado momento será necessário a consulta de
quanto de opacidade há em um elemento HTML, então,
para conseguirmos essa informação, informamos apenas
o ID do elemento HTML desejado ao método get_opacity e
teremos o retorno. Observe:
w3Opacity.get_opacity(‘id_do_objeto’);
Bom, assim como o w3Opacity,
estou envolvido em diversos outros recursos e todos eles com
a mesma finalidade: codificar
menos e viver mais. Então, se você quiser se
envolver junto comigo, visite o Labs
do Leandro Vieira Pinho e também o Fórum
do Labs do Leandro Vieira Pinho onde discutiremos todas as
dúvidas, sugestões, avisos sobre bugs, novos lançamentos,
entre outros assuntos sobre esses recursos.
Sempre quando crio algum recurso como este apresentado neste
artigo, posto no meu Blog a
respeito, mas de uma maneira superficial e rápida. Aqui
no iMasters procuro detalhar
melhor os recursos, então, fique atento quanto as outras
novidades que estão no forno e que em breve serão
estarão a disposição de todos vocês.
Bom, espero que tenham gostado. Um forte abraço a todos
e até o próximo.
