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

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


Este artigo foi publicado a 5 anos, 3 meses, 1 semana, 1 dia atrás.

Muito se lê na internet sobre parallax, reponsividade, navegação one page e outros recursos incríveis que deixam qualquer desenvolvedor frontend com "água na boca" para colocar  em prática o mais rápido possível, mas é ai que começa a dor de cabeça do desenvolvedor e, as vezes, do usuário, já que alguns tipos de navegação, como ajax e one page, nativamente, ignoram um fator importantíssimos para qualquer site de qualidade: Histórico de navegação.

Pensando nisso quero mostrar neste artigo como é fácil montar uma página de forma que você possa desenvolver seus sites oferecendo um frontend de qualidade para seus clientes sem perder tempo.

Obs.: Vou usar este tema na nossa série de como fazer um CMS (Gerenciador de conteúdo de sites) com CakePHP..

Gostou deste artigo?

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

Não vamos usar AngularJs, Vue nem qualquer outro tipo de framework.

Montando a estrutura de desenvolvimento Frontend

Localize aonde você vai criar o frontend do site e crie 4 pastas (css, img, js e paginas), um arquivo index.html, dentro de css crie tema.css e dentro de js crie tema.js.

Você deve ter uma estrutura exatamente assim:

  • css
    • tema.css
  • img
    • --nada--
  • js
    • tema.js
  • paginas
    • --nada--
  • index.html

Visite a página do Twitter bootstrap e clique em customize no menu, aqui um atalho pra você e desmarque tudo (pode usar o Toggle all ali do lado) e selecione todos os itens de Scaffolding, Base CSS (menos Icons), Reponsive e em JS Components marque apenas Dropdowns, deixe o resto desmarcado. No segundo grupo marque apenas dropdowns. Role até o final e clique em Customize and Download, descompacte e copie o bootstrap.min.css e bootstrap.min.js para as pastas de css e js (cada um no seu quadrado), ignore a pasta de imagens (img).

Agora vá até a página Get started do site do Bootstrap (mais um atalho) e em HTML template copie o segundo quadrado no seu arquivo index.html, remova a linha <h1>Hello, world!</h1> e troque a linha do Jquery ("http://code.jquery.com/jquery.js") pela do Google (que é mais usada e menor):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Ok, agora baixe este arquivo e descompacte na pasta js, com isso você já tem também o Stellar para o parallax, e o History para o Histórico do navegador, adicione-os ao seu HTML, logo abaixo do bootstrap.js:

<script src="js/jquery.stellar.min.js"></script>
<script src="js/jquery.history.js"></script>

Chame o seu tema.js depois do history:

<script src="js/tema.js"></script>

Abra o tema.js e cole dentro dele:

$(window).load(function() {

//nossa engine

});

Estou usando $(window).load porque precisamos que o javascript apenas esteja disponível depois que todos os elementos da tela forem carregados, para evitar algum bug em imagens de fundo principalmente, se quiséssemos que ele executasse após o código estar carregado poderíamos usar o $(document).ready() ou o atalho $(function(){}), mas esse não é o caso.

E por  fim o tema.css depois do bootstrap.min.css:

<link rel="stylesheet" type="text/css" href="css/tema.css"/>

Pronto, com isso construímos nossa estrutura de desenvolvimento.

Entendendo o Stellar Parallax

O Stellar Parallax é a nossa engine para emular o efeito de profundidade, ou seja, aquela animação que ocorre quando rolamos a página, por default ele vem com o horizontal e o vertical ligados, isso não é interessante para nós, já que não usaremos o horizontal e ele vai tirar nossos elementos da posição inicial.

Antes de passar o código de configuração do Stellar, quero ressaltar que tudo o que vamos fazer deverá ficar aonde está "//nossa engine", sempre mantendo as outras duas linhas como primeira e ultima do código.

Cole isso no tema.js:

$.stellar({

    horizontalScrolling: false, positionProperty: 'transform'

});

Com isso desligamos o parallax horizontal e já coloquei a propriedade css que faz o Stellar funcionar no Iphone e derivados.

O Stellar trabalha alterando os valores de posicionamento de elementos com posicionamento absoluto e fixo, ou seja, os position:absolute e position:fixed, além de também trabalhar com backgrounds.

Tenha em mente que o padrão é 1, ou seja, com valor 1 ele não faz nada e nem é preciso colocar nada no elemento, com esse valor base em mente podemos dizer que 0,5 é metade da velocidade e 2 é o dobro e valores negativos movem para o outro lado, mas como vamos informar essa velocidade? Usaremos dois novos atributos que o Stellar disponibiliza, é muito prático, é só colocar isso na tag do elemento:

data-stellar-ratio="1.7" //para aplicar o efeito a um elemento.

e

data-stellar-background-ratio="0.2" //para aplicar o efeito em backgrounds

Por enquanto apenas anote isso mentalmente.

Entendendo o Jquery History

O Jquery History armazena o evento atual no histórico do navegador, com isso vamos criar uma função que vai pegar o hash (o link clicado) e requisitar o conteúdo na página, aplicando ao local que indicarmos.

Existem 3 eventos possíveis:

load: Quando carregamos a página.

push: Quando clicamos no link.

change: Quando é usado o botão de voltar, avançar e ir do navegador.

Faça uma nota mental disso.

Estrutura do HTML do tema.

Agora vá ao seu body, na página index.html e antes do javascript, vamos começar a crar o HTML estrutural da página. Para tal vamos criar 3 seções principais, cabeçalho, corpo e rodapé:

<header id="header"></header>
    <main>
        <article id="conteudo"></article>
    </main>
<footer id="footer"></footer>

Com isso temos a estrutura da nossa página pronta, no próximo artigo vou mostrar como criar o CSS que vai personalizar e incluir um pouco de funções do nosso Twitter Bootstrap. Também vamos terminar o HTML do nosso tema. Até a próxima semana pessoal.


Cursos relacionados


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