jQuery é amplamente conhecido no seio dos desenvolvedores web e como muitos sabem é bastante útil. Um dos pontos fortes de jQuery é a possibilidade de se adicionar efeitos “especiais”  nas páginas web sem grandes problemas. Estes efeitos passam por exemplo por mostrar e ocultar partes da página sejam elas texto ou imagens. jQuery é considerado como uma das melhores bibliotecas Javascript existentes no mercado das linguagens de programação, permitindo aos desenvolvedores criar verdadeiras obras de arte para quem visita as suas páginas. A introdução de efeitos nas páginas pode levar ao melhoramento da experiência de navegação do usuário, fazendo muitas das vezes com que este goste do que vê e volte mais tarde. A fidelização dos visitantes é um aspecto muito importante, e com jQuery você pode dar um passo em frente nesse campo. Para o ajudar a melhorar as suas páginas web utilizando jQuery trazemos-lhe neste artigo alguns 6 Efeitos jQuery para introduzir em seus websites!

Não perca os artigos anteriores relacionados com jQuery e Javascript:

jquery

1. ANTES DE COMEÇAR – PARTE I

Antes de começar avalie os seus conhecimentos: Se sabe o que é jQuery e como utilizar, passe para o ponto 3. Se não sabe, não há problema! A Escola Criatividade tem um fantástico tutorial de jQuery que poderá ler para aprender e começar já a utilizar jQuery, visite-o em Tutorial jQuery: o que é e como usar o jQuery!

2. ANTES DE COMEÇAR – PARTE II

Nunca é demais lembrar e relembrar que é necessário fazer a chamada à biblioteca jQuery para que os efeitos funcionem. Caso não o faça, esperam-no muitas horas de frustração tentando fazer com que os efeitos funcionem. A versão mais recente é a 1.6.4 que poderá ser baixada aqui. Lembre-se que dentro da tag <head> terá de colocar a chamada ao ficheiro. Se o ficheiro jQuery estiver na mesma pasta que o ficheiro HTML, basta colocar o seguinte código:

<script src="jquery-1.6.4.min.js" type="text/javascript"></script>

3. EFEITO SHOW

O efeito show como o nome indica passa por mostrar algo. Pode definir na sua página que um objecto por defeito está escondido, e adicionando o efeito Show dá a possibilidade ao visitante de ter acesso ao conteúdo escondido. Para introduzir o efeito show basta utilizar o seguinte trecho de código:

$("#conteudo").show(2000);

Naturalmente, este trecho de código não funcionará sozinho, são necessários outros elementos, aqui fica o conjunto completo:

$(document).ready(function(){
$("#ocultar").click(function(event){
    event.preventDefault();
    $("#conteudo").show(2000);
   });
});

Este é o código que irá gerir a acção SHOW que irá decorrer durante 2 segundos, conforme estipulado em “.show(2000);”. Este valor pode ser alterado de acordo com a sua preferência ou necessidade!

4. EFEITO HIDE

A utilização do efeito Hide é bastante semelhante ao efeito show  em que pode definir na sua página que um objecto por defeito está á vista, e adicionando o efeito Hide dá a possibilidade ao visitante de esconder o conteúdo visível. Para introduzir o efeito Hide basta utilizar o seguinte trecho de código:

$("#conteudo").hide("slow");

À semelhança do Show, este trecho de código não está sozinho, aqui fica o conjunto completo:

$(document).ready(function(){
$("#ocultar").click(function(event){
    event.preventDefault();
    $("#conteudo").hide("slow");
   });
});

Este é o código que irá gerir a acção HIDE que irá decorrer lentamente, conforme estipulado em “.hide(“slow”);”. Este argumento pode também ser alterado por exemplo para “fast”. Experimente!

5. EFEITO SLIDEDOWN

A utilização do efeito Slide Down é bastante semelhante aos demais, mas neste caso o conteúdo irá deslizar para baixo. Para introduzir o efeito Slide Down basta utilizar o seguinte trecho de código:

$("#conteudo").slideDown(1500);

O conjunto completo:

$(document).ready(function(){
$("#deslizar_baixo").click(function(event){
    event.preventDefault();
    $("#conteudo").slideDown(1500);
   });
});

Este é o código que irá gerir a acção SlideDown que irá decorrer de acordo com o tempo estipulado em “.slideDown(1500);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!

6. EFEITO SLIDEUP

A utilização do efeito Slide Up é bastante semelhante aos demais, mas neste caso o conteúdo irá deslizar para baixo. Para introduzir o efeito Slide Up basta utilizar o seguinte trecho de código:

$("#conteudo").slideUp("fast");

O conjunto completo:

$(document).ready(function(){
$("#deslizar_cima").click(function(event){
    event.preventDefault();
    $("#conteudo").slideUp("fast");
   });
});

Este é o código que irá gerir a acção SlideDown que irá decorrer de acordo com o tempo estipulado em “.slideUp(“fast”);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!

7. EFEITO FADEIN

A utilização do efeito Fade In é bastante semelhante aos demais, mas neste caso o conteúdo aparecer com um efeito de transparência. Para introduzir o efeito Fade In basta utilizar o seguinte trecho de código:

$("#conteudo").fadeIn("fast");

O conjunto completo:

$(document).ready(function(){
$("#aparecer").click(function(event){
    event.preventDefault();
    $("#conteudo").fadeIn("fast");
   });
});

Este é o código que irá gerir a acção FadeIn que irá decorrer de acordo com o tempo estipulado em “.fadeIn(“fast”);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!

8. EFEITO FADEOUT

A utilização do efeito Fade In é bastante semelhante aos demais, mas neste caso o conteúdo aparecer com um efeito de transparência. Para introduzir o efeito Fade In basta utilizar o seguinte trecho de código:

$("#conteudo").fadeOut("fast");

O conjunto completo:

$(document).ready(function(){
$("#aparecer").click(function(event){
    event.preventDefault();
    $("#conteudo").fadeOut("fast");
   });
});

Este é o código que irá gerir a acção FadeIn que irá decorrer de acordo com o tempo estipulado em “.fadeIn(“fast”);”. Este argumento pode também ser alterado de acordo com a sua preferência. Experimente!

CÓDIGO FONTE

Se tiver interesse em descobrir como está o código fonte final utilizando os 6 Efeitos que lhe trouxemos neste artigo, pode baixá-lo aqui.

TEM ALGUMA SUGESTÃO?

Gostamos de contar com a opinião e sugestões dos nossos leitores. Se tem alguma sugestão ou opinião não perca mais tempo, comente o artigo!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Jose Correia
    16 de outubro de 2011

    Olá Diogo Espinha.
    Sou novo leitor do seu blog e acho o muito bom.
    Vim aqui perguntar se por acaso voce sabe de algum tutorial para aprender php sem ser o manual do php e em português.
    Espero a tua resposta :)



    • Diogo Espinha
      17 de outubro de 2011

      Olá Jose Correia, uma rápida pesquisa por “php” irá devolver alguns artigos sobre PHP presentes na Escola Criatividade.
      Abraço!



  2. Jose Correia
    16 de outubro de 2011

    Desculpa mas esquecime de perguntar uma coisa.
    Sei que nao es da escola wp mas sabes como colocar artigos relacionados com algum plugin ou codigo php?



  3. Jose Correia
    17 de outubro de 2011

    obrigado paulo :)



  4. Jose Correia
    17 de outubro de 2011

    desculpe obrigado diogo



  5. Jose Correia
    18 de outubro de 2011

    Mas onde se coloca estes codigos?
    Em que contexto?



  6. Digital Side
    1 de novembro de 2011

    Faltou exibir a aplicação dos códigos acima em exemplos reais, aonde é possível ver os efeitos em ação.

    Grande abraço!



    • Diogo Espinha
      1 de novembro de 2011

      Olá Digital Side, no código fonte que está disponibilizado no final do artigo tem os vários efeitos introduzidos numa página HTML, na qual poderá ver os efeitos em acção. Pode baixar o código fonte aqui.

      Abraço!



  7. Josué
    30 de novembro de 2011

    Parabéns pelo site. Muito conteúdo interessante e bem explicado.

    Olhando o código do exemplo, ví que o elemento hgroup foi colocado dentro do head. Isto é semanticamente permitido?


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz