Existem muitas tecnologias diferentes disponíveis para a concepção de uma página web. Um elemento de estilo usado em toda a Web é o uso de transparência, que é controlado pelo ajuste a opacidade de um elemento. Um programador pode conseguir este efeito através de uma variedade de diferentes meios , incluindo a utilização da estrutura MooTools . MooTools
MooTools é um framework JavaScript. JavaScript é a linguagem de script principal da Web , que é capaz de criar animações complexas ou funcionalidade Web simples. O objetivo da MooTools é criar uma forma simplificada para os desenvolvedores usar JavaScript. Alega para reduzir a quantidade de código que um desenvolvedor vai escrever, permitir a fácil compatibilidade cross-browser e fornecer um quadro leve, confiável.
Opacidade Usa
Quando você ajustar a opacidade de um elemento que você controlar a sua transparência em geral. Isto pode ser utilizado numa variedade de maneiras diferentes ; desenvolvedor pode quer reduzir a opacidade de uma imagem , aumentando a sua transparência , a fim de criar uma imagem de fundo mais adequado . Você também pode ajustar a opacidade de uma imagem com base em ações de um usuário , por exemplo, se um usuário coloca seu cursor sobre uma imagem , você pode reduzir a opacidade da imagem , a fim de indicar que ele foi selecionado. A transparência pode também ser utilizado como um elemento de estilo . Fornecer uma variedade de níveis de opacidade em uma página da Web pode aumentar a profundidade ea sensação do produto final.
Simples opacidade Efeito
MooTools foi projetado para reduzir o a quantidade de código necessário para produzir efeitos de JavaScript , e você pode alterar a opacidade de qualquer imagem em uma página da Web com o uso da biblioteca do MooTool . Com a criação de uma "classe" e usar o "set" método você pode indicar diferentes níveis de opacidade , que podem então ser usados por simplesmente identificar a classe dentro de sua tag de imagem HTML. Um exemplo do código MooTools está abaixo:
window.addEvent (' domready ', function () {
$ $ (' opacidade .') Cada (function ( miel ) { < . br>
MyEl.set (' opacidade ' , + MyEl.get ( 'rel ') '. ');
});
});
no exemplo acima, você criou uma classe de " opacidade " e indicou que a transparência da imagem mudará quando você ajustar a imagens tag " rel" . Ao colocar " window.addEvent (' domready ', function () { " no código que você está instruindo a função intitulado " miel " para disparar quando a página é carregada HTML. Isso irá garantir que a mudança de opacidade é feita assim que o visitante chega ao seu site, a fim de implementar a mudança opacidade adicione a seguinte linha de código HTML: .
Substitute " myImg.jpg " com o seu arquivo de imagem. neste exemplo " myImg.jpg " tem uma opacidade de 50 por cento.
opacidade Animação
uma forma de aumentar o efeito de transparência é animá-lo . Usando MooTools você pode ajustar a opacidade de uma imagem com base em como o usuário interage com um objeto. eventos de mouse são o tipo mais comum de interação. Usando MooTools , você pode indicar que você gostaria que a opacidade fixado em um nível em " mouseenter " ( quando o usuário mouses sobre um objeto ) e um outro nível em " mouseleave " (quando o cursor é removido do objeto). Este tipo de função é implementada de forma semelhante a uma mudança de opacidade simples ; . criar uma "classe" e chamar essa classe em seu código HTML a função , em seguida, usa eventos do mouse para alterar a opacidade da imagem
(function ( $ ) {
< . p> window.addEvent (' domready ', function () { var
opacidade = 0,6, toOpacity = 0,8 ; .
$ $ (' div.opacity ') set (' opacidade ' . , opacidade ) addEvents ( {
mouseenter : function () {
this.tween (' opacidade ' , toOpacity ) ;
} ,
esta função indica que a janela deve mudar para um nível de opacidade do " 0.8" ou 80 por cento quando o mouse entra pela janela. assim como o primeiro exemplo ( na Seção 3 ), a função inicial é definido para carregar uma vez que a janela do navegador é aberto , o que é indicado por " domready . " a função " mouseenter " instrui qualquer imagem com uma classe de " opacidade " para mudar de " opacidade " para " toOpacity . " os valores para essas variáveis são definidas na terceira linha de código. ao ajustar estes números que você vai ajustar o nível de funções de opacidade quando o mouse entra ou sai da imagem.
