Como criar um tema Parallax, Navegação Ajax, responsivo e histórico do navegador usando Twitter Bootstrap e Jquery - Parte 3 - O Javascript Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 4 anos, 2 meses, 1 dia atrás.

Este é o último artigo desta série e agora vamos realmente fazer a mágica acontecer no nosso tema. Se você chegou aqui, com certeza já leu os dois artigos anteriores e está apto a prosseguir.

Logomarca personalizada

Continuando, agora vamos trabalhar o nosso javascript, abra seu arquivo tema.js (na pasta js, claro) e vamos começar a trabalhar primeiro pelo logotipo, o que vamos fazer é separar a primeira palavra e adicionar um span com a classe "em", isso vai mudar a cor da palavra e causar um efeito de logomarca.

Antes de mostrar o código quero ressaltar que eu poderia ter feito de outra forma, não usar each, usar apenas o split, sei lá, o céu é o limite, mas achei que assim mostro mais recursos nativos do javascript.

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

$('a.logotipo').each(function() {
    palavras = $(this).text().split(' ').length;
    if(palavras>1){
        var html = $(this).html();
        var word = html .substr(0, html.indexOf(" "));
        var rest = html .substr(html.indexOf(" "));
        $(this).html(rest).prepend($("<span />").html(word).addClass("em"));
    }
});

Aqui eu pego os elementos "a" (link) com a classe "logotipo" e percorro o código atrás de cada um dos ítens (ou seja, um), vou usar a lista numerada para explicar o que cada linha faz, mudou o número mudou a linha, ok:

  1. Transformo o texto ($(this).text()) em um array de palavras (split(' ')) e descubro a quantidade de palavras que tenho neste array (length) e guardo na variável palavras
  2. Se tiver mais que 1 palavra (if(palavras>1))
  3. Pego todo o código e guardo na variável html, note que uso var já que quero que esta variável só exista aqui nesta função
  4. Eu podia aqui usar o split novamente, mas ia evitar de te mostrar duas funções legais do javascript, uma é a substr, que pega o texto entre as posições especificadas de uma string (exemplo: na frase "Erik Figueiredo" substr(0,3) pegaria "Erik", note que 0 é a primeira posição, e 1 a segunda), no exemplo eu usei o indexOf(' ') como segundo parametro, ele retorna a posição que o caracter aparece na primeira vez, ou seja, vai me dizer aonde o primeiro espaço está aparecendo (novamente 0 é a primeira posição, 1 a segunda e assim por diante)
  5. Na variável rest eu usei a mesma dica, mas agora só enviei a primeira posição, ou seja, vai pegar o resto que sobrou do texto depois do que estou dizendo.
  6. Por fim estou usando o Jquery pra criar minha frase com a primeira palavra entre , estou dizendo assim: Coloque todo o resto dentro do elemento substituindo o conteúdo atual (.html(rest)) e coloque um antes desse conteúdo, mas ainda dentro do a.logotipo (prepend($("")), ai coloco a primeira palavra dentro deste span html(word), adiciono a classe "em" (addClass("em")) e fecho o prepend, que indicou que isso tudo vai antes do rest, mas ainda dentro do elemento atual.
  7. Fecho o if e o each

Parece meio complicado quando se olha, mas se você souber o que cada elemento faz, fica fácil, minha dica, faça um curso de Javascript ou estude alguma documentação, se você pesquisar no Google vai achar várias.

Configurando o Stellar para ativar o efeito parallax

Vamos querer que o nosso efeito parallax tenha suporte a celulares e seja exclusivamente vertical, ele não vai ter efeito horizontal, então vou dar um horizontalScrolling = false para deligar isso e setar positionProperty para transform (que tem melhor resultado em celulares), o final será:

$.stellar({
  horizontalScrolling: false,
  positionProperty: 'transform'
});

Não é difícil usar o Stellar e você ainda pode conseguir um parallax horizontal, um slider, sei lá, mas você pode saber mais dele no site oficial http://markdalgleish.com/projects/stellar.js/

Configurando o acesso ao histórico

Lembra quando falei no primeiro artigo sobre os recursos do history, pois é, eu quero que ele pegue a navegação via clique, quando carregamos a página e quando usamos os botões voltar e avançar do navegador e envie esses comandos para a função vaiPara (com o url) clicado, note que eu não vou precisar enviar o tipo de evento (push, load ou change).

$.history.on('load change push', function(event, url, type) {
    vaiPara(url);
}).listen('hash');

O evento clique

Você precisa iniciar o evento de clique do history, e vou aproveitar isso para fazer algo mais específico e que eu possa gerenciar melhor vou criar meu próprio evento, eu poderia colocar a regra que quiser, por exemplo ignorar links com _blank ou com algum rel expecífico, mas vou fazer ele ignorar por classe, a fancy (se eu quiser implementar uma galeria fancybox futuramente, e vou, mas futuramente) e também uma classe no-ajax que vai me dizer que links devem ser ignorados, por questões de organização minha, vou usar um if para cada regra, você pode fazer um só, ou até uma função se quiser.

$("body").on('click','a',function(event) {
    if(!$(this).hasClass('fancy')){
        if(!$(this).hasClass('no-ajax')){
            var url = $(this).attr('href');
            vaiPara(url);
            $.history.push(url);
            return false;
        }
    }
});

Viu como eu informei o método push ali ($.history.push(url);), é assim que você inicia ele.

Navegação Ajax

Quando vamos desenvolver algo a primeira coisa a se fazer é estabelecer pra que isso serve, Quando você leu isso pode ter parecido bobo, mas vamos a um exemplo:

Pergunta: Pra que serve uma navegação ajax?

Resposta: Para abrir link sem recarregar a página.

Ai eu pergunto pra você, porque tem gente que insiste em usar hashs como #home e #empresa e não o próprio link da página? Bem básico, e pra completar você ainda pode incluir uma rotina para verificar se o link chamado é interno ou externo lá na chamada do $.history.push, mas não vou fazer isso neste artigo.

Este é o código que realmente vai fazer as coisas funcionarem:

function vaiPara(hash){

    //bloco 1
    $('html, body').bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
    if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
        $('html, body').stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup');
    }
    });

    //bloco 2
    $('html, body').animate({
        scrollTop: $('#conteudo').offset().top
    },{'duration':5000,'easing':'easeOutQuint'});

    //bloco 3
    $('.dropdown').removeClass('open');

    //bloco 4
    $('#conteudo .cms-conteudo').html('

<h1 class="text-center sozinho">
  <img src="'+base_url+'img/ajax-loader.gif" />
</h1>');

    //bloco 5
    $.ajax({
        url:hash,
        dataType:'html',
        success:function(data){
            $('#conteudo .conteudo').html(data);
        },
        error:function(){
            $('#conteudo .conteudo').html('

<h1 class="text-center sozinho">
  Página não encontrada
</h1>');
        }
    });
}

Separei em 5 blocos pra ficar mais fácil de explicar.

Quando eu clico em algum link ele executa uma animação de rolagem da página até o bloco de conteúdo, mas isso gera um erro estranho caso a página não tenha tamanho suficiente e ele pare antes do final, se você tentar rolar pra cima não vai, o bloco 1 previne isso parando a animação assim que você rolar pra cima, seja com scroll do mouse, barra de rolagem, tanto faz, ele para a animação.

E o bloco 2 executa essa animação.

O bloco 3 corrige outro bug no site que o dropdown do site nos dispositivos móveis.

O bloco 4 vai mostrar um gif que indica que o conteúdo está sendo carregado.

E por fim o bloco 5 vai executar a chamada ajax via Jquery e trazer a página indicada pelo link que clicamos, note que também setei uma resposta caso ele encontre algum erro ao acessar a página.

Com este método de chamada ajax você pode facilmente indicar qualquer tipo de administração backend para reconhecer o cabeçalho ajax (sim, da pra detectar se é uma chamada ajax via PHP igual fazemos com post, get, celular, qual navegador) e setar uma página vazia, apenas com o conteúdo a se exibir, não acredita, aguarde quarta-feira (25/09/2013) pra ver um exemplo de administração compatível com esta tecnologia.

Também vou aproveitar pra anunciar que em breve quero iniciar uma nova categoria no blog, que é WordPress, e vou aproveitar este tema pra mostrar como fazer chamadas ajax dentro do wordpress, com base na ideia de podermos carregar qualquer link que quisermos dentro da página.

Continuem ligado no blog e cadastrem-se na newsletter que fica ao lado do artigo, um pouquinho pra cima, prometo que vou falar mais de frontend.


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!