Continuando a ajuda a meus brothers, depois de manipular os elementos com JavaScript, o meu mesmo amigo queria fazer um site com seções, onde toda vez que clicasse em algum botão, ele rolaria para a próxima seção. A ideia inicial dele era fazer com âncoras, e sem JavaScript ou jQuery, mas, eu disse a ele que era mole fazer com jQuery, e ia ficar uma animação bacana.
Pois bem, aqui vamos nós.
O resultado final está aqui, mas segue o passo-a-passo adiante que é mole.
[EDIT-20/10/2018]: Para navegadores novos, foram necessárias algumas modificações. Acompanhe o código fonte no link no fim do post.
HTML (parte I)
Vamos começar criando nosso HTML com 4 divs dentro do body. Todas as divs devem ter a classe secao e cada div uma ID específica.
CSS (parte I)
Vamos agora colocar uma cor em cada seção, e também tirar margin e padding do body (um reset para as divs ficarem ocupando toda a janela do navegador). Coloque uma cor diferente em cada seção.
jQuery (parte I)
Se você testou sua página, percebeu que ainda tá tudo branco né? Porque as seções ainda não tem altura definida.
Parecido com o que expliquei aqui, vamos pegar a altura do documento, e atribuir a cada seção. Mas antes disso, vamos importar o jQuery no cabeçalho da nossa página.
Depois vamos criar uma variável, para armazenar a altura da janela, vamos usá-la várias vezes. Em seguida, vamos atribuir esta altura a cada uma das seções. Tem um detalhe importante. Se nossa função for chamada antes das divs existirem no documento…não vai acontecer nada. Então pega um detalhe.
O simples fato de você colocar a chamada da função dentro da chamada jQuery, faz com que essa função seja chamada apenas depois que o documento estiver carregado. Sensacional né?
HTML (parte II)
Se você já testou como está ficando (eu espero que você tenha o mínimo de curiosidade, por favor), viu que as seções já estão lá, cada uma com o mesmo tamanho, que é o tamanho da janela do seu navegador, maneiro (Y).
Agora, vamos criar um botão só com HTML e CSS pra clicar e ir para a próxima seção.
Dentro das primeiras seções, você vai criar um span dentro com a classe icone-scroll e dentro desse span você vai criar outro com duas classes: scroll-next e scroll.
Na última seção, você vai também criar o span com a classe icone-scroll, porém, dentro desse span você vai colocar dois spans com as seguinte classes: scroll-top e scroll.
CSS (parte II)
Agora vamos dar forma ao ícone. Para que o ícone sempre fique posicionado em relação a sua seção, vamos colocar position relative em todas as seções. Depois vamos fazer uma elipse – também conhecida como bola redonda – com um tom de cinza escuro, e dentro uma setinha, tudo isso só com CSS, pega a ideia primeiro da bolinha:
Alguns comentários sobre o código acima. Border-radius pra deixar o span elíptico. Position absolute + bottom vai deixar o ícone sempre na parte debaixo da seção. Left 50% + margin-left com a metade negativa do tamanho (width = 50, margin-left = -25) pra que ele fique exatamente no centro, da horizontal.
CSS (parte III)
No span mais interno, vamos fazer um quadrado, mais só colocar borda do lado direito e embaixo. O que vai acontecer? Uma seta! Porém ela ainda não vai estar na posição que a gente quer. Pra isso, vamos girar as setas de next pra baixo e as de top para cima.
A última regra do CSS é pra chegar apenas a segunda setinha, do scroll-top um pouco pra cima.
Resultado:
jQuery (parte II)
Tá ficando bom. Agora vamos criar uma função que rola a página para a próxima seção, ou para o topo da página, e depois vamos chamá-la no click do botão que acabamos de criar.
Quando clicar no botão, o código irá verificar em qual seção estamos. Se estiver na primeira seção, ele vai rolar um tamanho igual a altura da janela. Se estiver na segunda seção, duas vezes a altura da janela, e assim por diante. Se ele estiver na última seção, ele vai rolar para o início da página.
Pra que você não tenha problemas de carregamento (e também é uma boa prática para a página carregar mais rápido) coloque esse nosso script no fim da página, antes do fechamento da tag HTML.
O resultado foi esse aqui ó:
Adicional
Se você ainda quiser fazer uma graça, e obrigar o usuário a navegar apenas seção por seção, tirando o scroll da página, basta colocar overflow hidden na tag HTML. Mas, em questões de usabilidade, isso não é uma boa prática. Mas se estiver só brincando, divirta-se.
O código completo, você pode ver aqui no meu Github.
Referências
Ficou com alguma dúvida?
Deixa aí nos comentários.
Curte minha página, pra ficar por dentro das novidades!
[wpdevart_like_box profile_id=”514623068560386″ connections=”show” width=”300″ height=”250″ header=”small” cover_photo=”show” locale=”pt_BR”]
