PESQUISA PERSONALIZADA

HTML e CSS Pro -  O melhor Portal para se aprender HTML e CSS na prática.

Home CSS Scroll Suave com CSS Transition, CSS Transform e CSS Animation

Scroll Suave com CSS Transition, CSS Transform e CSS Animation

CSS Luiz Augusto Vieira  

Scroll Suave com CSS Transition, CSS Transform e CSS Animation
  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

Vamos usar uma navegação com botões radios ( input type="radio" ) de opção e combinando os irmãos vamos ativar as transições para as respectivas seções de conteúdo, criando um efeito de rolagem suave.

Vamos criar algumas seções de conteúdo e uma navegação que nos permita navegar entre as mesmas. Usaremos botões de rádio para a navegação e animaremos as seções para a posição correta com uma transição, criando um efeito de rolagem suave.

1º PASSO:

Vamos fazer a marcação do HTML em nossa página, ou seja, estruturar uma container principal que conterá os botões de opção, os links e a classe ( .scroll ) que contém as seções.

<div class="container">

<!-- Menu -->
<input type="radio" name="radio" checked="checked" id="radio-nav-1" />
<span>HTML 5</span>

<input type="radio" name="radio" id="radio-nav-2" />
<span>CSS 3</span>

<input type="radio" name="radio" id="radio-nav-3" />
<span>LESS</span>

<input type="radio" name="radio" id="radio-nav-4" />
<span>SASS</span>

<input type="radio" name="radio" id="radio-nav-5" />
<span>jQuery</span>

<!-- Scroll + Section -->
<div class="scroll">
<section class="section" id="section-1">
<div class="logo">
<span>HTML 5</span>
</div>
<h2>HTML 5</h2>
<p>Lorem ipsum lorem ipsum...</p>
</section>

<section class="section" id="section-2">
....
</section>

<section class="section" id="section-3">
....
</section>

<section class="section" id="section-4">
....>
<p>....</p>
</section>

<section class="section" id="section-5">
....
</section>

</div>
</div>

Vamos mover a classe ( .scroll ) onde contém as seções alterando seu valor ao selecionar o irmão de um botão de opção checkado. Para poder identificar o correto, passamos IDs aos botões de opção.

2º PASSO:

Vamos passar alguns estilos resetando algumas propriedades.

*{
margin: 0;
padding: 0;
}

body{
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
background: #ccc;
color: #fff;
overflow: hidden;
}

3º PASSO:

Vamos tornar o bloco container flexível e seus blocos do tamanho da tela. Temos que tornar o container principal absoluto com largura e altura de 100%, e configurar os blocos scroll e section para a posição relativa.

Eles também terão a largura e altura de 100%. Isso fará com que cada bloco tenha o tamanho da tela.

.container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}

4º PASSO:

Colocaremos a navegação na parte inferior da página, deixando a posição fixa e definir a mesma largura e altura para o input e o span.

Vamos sobrepor os botões de opções acima do span com ( z-index: 15 ), para que eles sejam clicáveis, dando uma opacidade de 0 para que eles não fiquem visíveis.

.container > input,
.container > span{
position: fixed;
bottom: 0;
width: 20%;
height: 34px;
line-height: 34px;
cursor: pointer;
}

.container > span{
background: #fff;
font-size: 16px;
font-weight: bold;
color: #48b188;
text-align: center;
z-index: 10;
}

.container > input{
z-index: 15;
opacity: 0;
}

5º PASSO:

Vamos posicionar os menus input e span, passando individualmente os valores no left para cada um.

#radio-nav-1, #radio-nav-1 + span{left: 0;}
#radio-nav-2, #radio-nav-2 + span{left: 20%;}
#radio-nav-3, #radio-nav-3 + span{left: 40%;}
#radio-nav-4, #radio-nav-4 + span{left: 60%;}
#radio-nav-5, #radio-nav-5 + span{left: 80%;}

6º PASSO:

Estamos usando o seletor irmão adjacente para alcançar o irmão direto de uma entrada que é o elemento span relacionado.

Definiremos um estado selecionado para os elementos span. Uma vez que clicados em um span, daremos ao elemento irmão a cor de plano de fundo diferente.

.container > input:checked + span,
.container > input:checked:hover + span{
background: rgba(46, 148, 109, 1);
color: #fff;
}

7º PASSO:

 Vamos adicionar uma seta indicadora usando a pseudo-classe e passar a mesma cor dos botões.

.container > input:checked + span::after,
.container > input:checked:hover + span::after{
content: "";
width: 0;
height: 0;
position: absolute;
bottom: 100%;
border: solid transparent;
border-bottom-color: rgba(46, 148, 109, 1);
border-width: 15px;
left: 50%;
margin-left: -15px;
}

8º PASSO: 

Definiremos um estado de foco para o elemento de span.

.container > input:hover + span{
background: rgba(46, 148, 109, .8);
color: #fff;
}

9º PASSO:

Os blocos terão a posição relativa e daremos a eles a largura e altura de 100%. A transição será para animar o valor da propriedade de transformação para a respectiva posição.

Vamos tirar a barra de rolagem do section, pois a nossa navegação será apenas pelos botões.

.scroll,
.section{
position: relative;
width: 100%;
height: 100%;
left: 0;
top: 0;
transition: all .6s ease-in-out;
-webkit-transition: all .6s ease-in-out;
}

.section{
overflow: hidden;
}

10º PASSO:

Vamo definir as cores para cada seção dos conteúdo, e para isso, atacamos os IDs das sections.

#section-1{background: #f47933;}
#section-2{background: #008fd5;}
#section-3{background: #3f689e;}
#section-4{background: #cf669c;}
#section-5{background: #4a3abe;}

11º PASSO:

Vamos estilizar o triângulo superior com o logo de cada seção posicionando no topo central da seção. Usando o ( transform: translateY(-50%) rotate(45deg); ) fará com que apenas metade da caixa apareça, criando um triângulo ao girar o bloco.

Passaremos também os estilos para o span, posicioando o mesmo e passando a cor do texto igual dos botões ativados.

.logo{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #fff;
transform: translateY(-50%) rotate(45deg);
-webkit-transform: translateY(-50%) rotate(45deg);
}

.logo span{
font-size: 30px;
position: absolute;
top: 150px;
left: 72px;
color: rgba(46, 148, 109, 1);
}

12º PASSO:

Agora, vamos estilizar os títulos (h2) e os parágrafos (p), passando para o título uma largura de 100%, transformando ele em um bloco flutuante e subindo o mesmo em ( margin-top: -70px; ).

Também, transformaremos o parágrafo em um bloco flutuante, passando a largura de 50%, posicionado 50% do topo e 25% à esquerda, descendo 10px no margin do topo.

.section h2{
position: absolute;
width: 100%;
font-size: 54px;
text-align: center;
font-weight: bold;
top: 50%;
margin-top: -70px;
}

.section p{
position: absolute;
width: 50%;
font-size: 16px;
text-align: center;
top: 50%;
left: 25%;
margin-top: 10px;
}

13º PASSO:

Definiremos as posições para o scroll ao clicar nos botões de opções. Como deixamos os blocos com altura de 100%, sabemos as posições exatas. Usaremos a propriedade ( transform ) para mover na dimensão Y, para cima e para baixo.

#radio-nav-1:checked ~ .scroll{
transform: translateY(0%);
-webkit-transform: translateY(0%);
}

#radio-nav-2:checked ~ .scroll{
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
}

#radio-nav-3:checked ~ .scroll{
transform: translateY(-200%);
-webkit-transform: translateY(-200%);
}

#radio-nav-4:checked ~ .scroll{
transform: translateY(-300%);
-webkit-transform: translateY(-300%);
}

#radio-nav-5:checked ~ .scroll{
transform: translateY(-400%);
-webkit-transform: translateY(-400%);
}

13º PASSO:

Toda vez que clicarmos em um botão, vamos animar o respectivo cabeçalho. Ele irá animar um pouco a cima e desaparecer ao mesmo tempo. Para selecionar o cabeçalho correto, usaremos o combinador irmão.

Criaremos um @keyframe animeDown e chamaremos ele no animation.

#radio-nav-1:checked ~ .scroll #section-1 h2,
#radio-nav-2:checked ~ .scroll #section-2 h2,
#radio-nav-3:checked ~ .scroll #section-3 h2,
#radio-nav-4:checked ~ .scroll #section-4 h2,
#radio-nav-5:checked ~ .scroll #section-5 h2{
animation: animeDown .7s ease-in-out .4s backwards;
-webkit-animation: animeDown .7s ease-in-out .4s backwards;
}

@keyframes animeDown{
0%{
transform: translateY(-50px);
-webkit-transform: translateY(-50px);
opacity: 0;
}
100%{
transform: translateY(0px);
-webkit-transform: translateY(0px);
opacity: 1;
}
}

14º PASSO:

Seguindo os mesmos passos de cima, mas, agora no parágrafo começando a animação um pouco abaixo.

Criaremos um @keyframe animeUp e chamaremos ele no animation.

#radio-nav-1:checked ~ .scroll #section-1 p,
#radio-nav-2:checked ~ .scroll #section-2 p,
#radio-nav-3:checked ~ .scroll #section-3 p,
#radio-nav-4:checked ~ .scroll #section-4 p,
#radio-nav-5:checked ~ .scroll #section-5 p{
animation: animeUp .7s ease-in-out .4s backwards;
-webkit-animation: animeUp .7s ease-in-out .4s backwards;
}

@keyframes animeUp{
0%{
transform: translateY(50px);
-webkit-transform: translateY(50px);
opacity: 0;
}
100%{
transform: translateY(0px);
-webkit-transform: translateY(0px);
opacity: 1;
}
}

Veja o resultado final.

  • Compartilhe esse post
  • Compartilhar no Facebook00
  • Compartilhar no Google Plus00
  • Compartilhar no Twitter

ATÉ O PRÓXIMO POST

Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.

Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro

Curta nossa Fanpage: https://www.facebook.com/htmlecsspro

Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro

Olá, deixe seu comentário para Scroll Suave com CSS Transition, CSS Transform e CSS Animation

Já temos 1 comentário(s). DEIXE O SEU :)
Artur Feliciano

Artur Feliciano

Gostei muito da sua paginas e seus conteudos são muito, facil e desperta rapido a vontade de aprender.
★★★★★DIA 07.10.19 16h15RESPONDER
Luiz Augusto Vieira
Enviando Comentário Fechar :/
Enviando Comentário Fechar :/