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.

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