Arquivos de Tag: Efeitos

Altere as imagens do background automaticamente com Javascript

Com este código é possível criar um efeito incrível que altera as imagens de background da página automaticamente. No código o tempo de transição está pré-configurado para 3 segundos porém é fácil de alterar. Outra alteração que se faz necessária é inserir o endereço das imagens no array images. Basta substituir o texto ENDERECO DA IMAGEM pela URL completa da imagem. Leia Mais »

Função autocompletar com jQuery, PHP e Banco de Dados

Função autocompleta para formulários, semelhante ao Google! Pessoal este script é um autocompleta, sua principal função é dar dicas quando o usuário este preenchendo um campo de busca! Ele utiliza uma Jquery que está em anexo! Dentro do anexo tem um arquivo chamado completar.php, portanto este arquivo é que busca no banco de dados as informações! AVISO: Altere o include “conexao.php”; para o padrão de conexão do seu banco! Leia Mais »

Crie efeitos para aparecer e ocultar elementos com jQuery

No exemplo vamos mostrar o uso simples das funções de efeitos de jQuery. Vamos implementar um simples efeito de ocultar e mostrar um elemento da página web. Com jQuery faremos que ao clicar os links se oculte e se mostre a camada, com as funções da biblioteca Effects. Para começar, este é o código HTML do exemplo, que compreende tanto a camada como os links. Isto é uma camada que nos servirá para fazer efeitos! Ocultar a camada | Mostrar a camada Agora vem a parte interessante, que é na que associamos eventos a estes dois links e codificamos as chamadas às funções de Effects, que farão com que se mostre e se oculte a camada. O código Javascript, que faz uso de jQuery seria o seguinte: $(document).ready(function(){ $("#ocultar").click(function(event){ event.preventDefault(); $("#camadaefeitos").hide("slow"); }); $("#mostrar").click(function(event){ event.preventDefault(); $("#camadaefeitos").show(3000); }); }); Como se pode ver, primeiro temos que definir o evento ready do objeto $(document), para fazer coisas quando o documento está preparado para receber ações. Logo, se define o evento click sobre cada um dos dois links. Para isso, invoco o método click sobre o link, que selecionamos com jQuery através do identificador da etiqueta A. $("#ocultar").click(function(event){ Com isto estou definindo o evento click sobre o elemento com id="ocultar". Dentro da função a executar quando se clica, se coloca a chamada à função dos efeitos. $("#camadaefeitos").hide("slow"); Isto faz com que nossa camada, a que havíamos visto o identificador (atributo id) "camadaefeitos", se oculte. Passamos o parâmetro "slow" porque queremos que o efeito seja lento. Agora vejamos a função dos efeitos com outra chamada: $("#camadaefeitos").show(3000); Isto faz com que se mostre o elemento com id "camadaefeitos", e que o processo de mostrar-se dure 3000 milésimos de segundos. Segue o código do exemplo completo. Leia Mais »

Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais. Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade. Essa é um efeito simples q movimenta o texto com a propriedade text-indent. XHTML: Inicio Portfolio Contato CSS: #animation-1 li{ width: 200px; } #animation-1 li a { display: block; padding: 10px 5px; width:190px; background-color: #ccc } jQuery: $(document).ready(function(){ $("#animation-1 li a").hover( function(){ $(this).animate({ textIndent: "30px" }, 500 ); },function(){ $(this).animate({ textIndent: "0px" }, 500 ); }); }); Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo. Leia Mais »

Efeito Toggle para revelar e esconder usando JQuery

Um dos efeitos mais empregados em desenvolvimento com uso da biblioteca jQuery é aquele que proporciona ao usuário a escolha de revelar e esconder conteúdos. O efeito toggler consiste em mostrar e esconder elementos, o efeito carrega consigo implicitamente as seguintes facilidades: * é simples e fácil de ser projetado; * requer cuidados mínimos para ser “não obstrutivo”; * permite inserir muito conteúdo em pouco espaço; * facilita a visualização e entendimento dos conteúdos; * proporciona interação agradável com o usuário; * cria impacto visual interessante. Abaixo segue o código script que manipula o efeito, em anexo vai um exemplo de utilização do efeito toggle. Leia Mais »