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.
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.
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.
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é?
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.
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.
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:
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 ó:
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.
Ficou com alguma dúvida?
Deixa aí nos comentários.
Curte minha página, pra ficar por dentro das novidades!
Desvendando o Potencial da Blockchain e Criptomoedas através da Criptografia Em um mundo onde a…
O deploy de uma aplicação React é uma etapa crucial para disponibilizar sua criação na…
Satellite 2020 foi a primeira conferência virtual do Github. O Github já tinha sido liberado…
Neste guia veremos o que são web components, quando usar, sua estrutura e também um…
A alguns anos atrás escrevi um texto sobre o que é o frontend, também palestrei…
O que é SVG é a sigla para Scalable Vector Graphics que traduzindo seria gráficos…
