Construindo template de WebSite dos Avengers

Construindo template de WebSite dos Avengers, No universo do desenvolvimento web, a criação de interfaces atraentes e interativas é fundamental para envolver os visitantes e oferecer uma experiência de usuário excepcional.

Neste artigo, vamos explorar um exemplo prático de como adicionar elementos interativos ao seu site, incluindo um menu de navegação estilizado, efeitos de paralaxe impressionantes e botões com design elegante.

Vamos desvendar o código por trás desses recursos, explicando cada parte para que você possa compreender e aplicar essas técnicas em seus próprios projetos.

Estrutura HTML

O que vem dentro da <head></head>

A seção <head> em um documento HTML contém metadados e referências a recursos externos que são usados para estilizar, estruturar e interagir com a página. Vamos explicar cada parte da seção <head> do código fornecido:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/resolutions.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link href="http://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Avengers</title>
</head>

Aqui estão as explicações para cada elemento dentro da seção <head>:

<link rel="stylesheet" type="text/css" href="css/style.css"> e <link rel="stylesheet" type="text/css" href="css/resolutions.css">:
- Esses elementos <link> estão referenciando arquivos CSS externos que serão usados para estilizar a página. O primeiro link refere-se ao arquivo “style.css” e o segundo refere-se a “resolutions.css”.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>:
- Este elemento <script> carrega a biblioteca jQuery do servidor Google. O jQuery é uma biblioteca JavaScript que facilita a manipulação de elementos HTML e a interação com eventos.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">:
- Este link carrega a biblioteca Font Awesome, que fornece uma variedade de ícones para serem usados na página. A integridade e a origem são especificadas para garantir a segurança da conexão.
<link href="http://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet" type="text/css">:
- Este link carrega a fonte “Oswald” da Google Fonts, que pode ser usada para estilizar o texto na página.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
- Esta meta tag controla a escala de exibição inicial e a largura da visualização da página em dispositivos móveis. Ela é crucial para criar um layout responsivo.
<title>Avengers</title>:
- Esta tag define o título da página que será exibido na aba do navegador.

Em resumo, a seção <head> do código HTML é responsável por importar estilos (CSS), bibliotecas (jQuery e Font Awesome), fontes personalizadas (Google Fonts) e metadados (viewport) que são essenciais para o design e a interatividade da página.

CSS para Estilos Globais

* {
    margin: 0;
}

O seletor universal * seleciona todos os elementos no documento.
margin: 0; remove a margem padrão de todos os elementos. Isso ajuda a criar uma aparência consistente e evita espaços indesejados ao redor dos elementos.

html, body {
    height: 100%;
}

Essa regra define a altura do elemento <html> e do <body> como 100% da altura da janela.
Isso garante que esses elementos ocupem toda a altura da tela, independentemente do conteúdo.

html {
    overflow-y: hidden;
    overflow-x: hidden;
}

Aqui, a propriedade overflow-y é definida como hidden, o que significa que a barra de rolagem vertical não será exibida no elemento <html>. Isso é feito para evitar que a página tenha uma barra de rolagem vertical visível, uma vez que o conteúdo poderia ser rolado através de outros meios, como os efeitos de paralaxe.
overflow-x também é definido como hidden para garantir que não haja rolagem horizontal.

body {
    background-image: linear-gradient( #0c020b , #10060a);
}

Esta regra define um plano de fundo gradientes linear para o corpo do documento.
linear-gradient() é uma função que cria um gradiente de cor. Neste caso, começa com a cor #0c020b e termina com a cor #10060a, criando uma transição suave de cores no fundo do corpo.

Essas regras CSS estabelecem uma base sólida para o estilo global do documento HTML. Elas removem margens indesejadas, ajustam as alturas do <html> e do <body>, ocultam as barras de rolagem indesejadas e aplicam um gradiente de cores atraente ao fundo do corpo. Esses estilos globais podem ter um impacto significativo na coesão visual e na aparência geral do seu site.

Menu de navegação

Vamos explorar um exemplo de HTML e CSS que cria um menu de navegação estilizado para um site. Vamos analisar cada parte do código e explicar seu significado e função.

Estrutura HTML

<nav class="menu">
    <ul class="logo">
        <li><img src="img/logo.png"></li>
    </ul>
    <ul class="links">
        <li class="home"> <a class="scroll" href="#back">Home</a> </li>
        <li class="iroman"> <a class="scroll" href="#back-1">Ironman</a> </li>
        <li class="hulk"> <a class="scroll" href="#back-2">Hulk</a> </li>
        <li class="antman"> <a class="scroll" href="#back-3">Ant</a>  </li>
        <li class="capitan"> <a class="scroll" href="#back-4">Captain</a> </li>
        <li class="thor"><a class="scroll" href="#back-5">Thor</a></li>
    </ul>
</nav>

Neste trecho de código HTML, um elemento <nav> é usado para criar a estrutura do menu de navegação. Dentro dele, existem duas listas não ordenadas <ul>, uma com a classe “logo” e outra com a classe “links”. A primeira lista contém um único item com uma imagem de logotipo. A segunda lista contém vários itens, cada um com um link de âncora para diferentes seções do site.

Falaremos da classe “scroll” mais adiante.

CSS Styles

.menu {
    display: flex;
    position: fixed;
    width: 100%;
    padding: 0;
    background: #8178783b;
    z-index: 9;
    justify-content: space-between;
    align-items: center;
}

.menu: Esta classe estiliza o contêiner do menu de navegação.
display: flex;: Aplica o modelo de layout flex para que os elementos filhos sejam organizados em uma linha.
position: fixed;: Fixa o menu na parte superior da janela, mesmo quando a página é rolada.
width: 100%;: Define a largura do menu como 100% da largura da janela.
background: #8178783b;: Define a cor de fundo do menu com um tom de cinza transparente.
z-index: 9;: Define a ordem de empilhamento do menu em relação a outros elementos na página.
justify-content: space-between;: Espaça os elementos internos à esquerda e à direita, empurrando-os para as extremidades do contêiner.
align-items: center;: Centraliza verticalmente os elementos internos.

.menu ul {
    display: flex;
}

Essa parte estiliza as listas não ordenadas dentro do menu de navegação para usar o layout flex.

.menu li {
    color: white;
    list-style: none;
    padding: 10px;
    cursor: pointer;
    font-family: sans-serif;
    font-weight: 200;
    font-size: 18px;
}

Estiliza os itens de lista (cada link e nome de personagem).
color: white;: Define a cor do texto como branco.
list-style: none;: Remove os marcadores de lista padrão.
padding: 10px;: Adiciona espaçamento interno de 10px aos itens de lista.
cursor: pointer;: Altera o cursor para a forma de mão quando o mouse está sobre os itens de lista.
font-family: sans-serif;: Define a família de fontes para sans-serif.
font-weight: 200;: Define a espessura da fonte como 200 (um valor mais leve).
font-size: 18px;: Define o tamanho da fonte como 18px.

.menu li:hover {
    transition: 0.5s; 
    font-size: 22px;
}

Quando o cursor paira sobre os itens de lista, esta regra é acionada.
transition: 0.5s;: Adiciona uma transição suave de 0.5 segundos para a mudança de tamanho da fonte.
font-size: 22px;: Aumenta o tamanho da fonte para 22px quando o cursor está sobre o item.

li a {
    text-decoration: none;
    text-transform: none;
    color: white;
}

Estiliza os links dentro dos itens de lista.
text-decoration: none;: Remove a decoração de sublinhado dos links.
text-transform: none;: Mantém o texto do link em maiúsculas e minúsculas normais.
color: white;: Define a cor do texto do link como branco.

.logo {
    width: 135px;
    height: auto;
}
.logo img {
    width: 100%;
}

Estiliza a área do logotipo.
.logo: Classe da área do logotipo.
width: 135px;: Define a largura do logotipo como 135px.
height: auto;: Mantém a altura proporcionalmente ao tamanho original.
.logo img: Estiliza a imagem dentro da área do logotipo.
width: 100%;: Faz com que a imagem do logotipo ocupe 100% da largura da área.

As próximas regras de estilo são aplicadas a itens específicos do menu, como “Ironman”, “Hulk”, “Ant”, “Captain” e “Thor”. Cada item possui uma transição de cor de sombra do texto quando o cursor está sobre ele, criando um efeito visual interessante.

.links{
    padding-right: 40px;
}
li.iroman{
    transition: 0.5s;
}
li.iroman:hover{
    text-shadow: 2px 0px #f66afc;
}
li.home{
    transition: 0.5s;
}
li.home:hover{
    text-shadow: 1px 1px #9C27B0;
}
li.hulk{
    transition: 0.5s;
}
li.hulk:hover{
    text-shadow: 2px 0px #00ffb3;
}
li.antman{
    transition: 0.5s;
}
li.antman:hover{
    text-shadow: 2px 0px #b80217;
}
li.capitan{
    transition: 0.5s;
}
li.capitan:hover{
    text-shadow: 2px 0px #05b4ec;;
}
li.thor{
    transition: 0.5s;
}
li.thor:hover{
    text-shadow: 2px 0px #ebb849;
}

Essa explicação abrange as partes principais do código fornecido, explicando como cada parte do HTML e do CSS contribui para criar um menu de navegação estilizado. É importante notar que o código usa seletores de classe e ID para estilizar elementos específicos. Além disso, a propriedade transition é usada para criar animações suaves quando o cursor é movido sobre os elementos. Esse estilo resulta em um menu de navegação atraente e interativo para um site.

Criando ícones para redes sociais

Estrutura HTML

<ul class="icones">
    <li class="fab fa-facebook"></li>
    <li class="fab fa-instagram"></li>
    <li class="fab fa-twitter"></li>
    <li class="fab fa-youtube"></li>
</ul>

Neste trecho de código HTML, uma lista não ordenada <ul> é usada para criar uma lista de ícones de mídias sociais. Cada item de lista <li> tem uma classe correspondente de ícone usando a biblioteca FontAwesome.

CSS Styles

.icones {
    display: grid;
    position: fixed;
    align-items: center;
    justify-content: center;
    z-index: 9;
    width: 4%;
    margin-top: 36%;
    cursor: pointer;
}

.icones: Esta classe estiliza o contêiner dos ícones de mídias sociais.
display: grid;: Aplica o modelo de layout grid para organizar os ícones.
position: fixed;: Fixa os ícones na página, mesmo quando ela é rolada.
align-items: center;: Centraliza verticalmente os ícones.
justify-content: center;: Centraliza horizontalmente os ícones.
z-index: 9;: Define a ordem de empilhamento dos ícones em relação a outros elementos.
width: 4%;: Define a largura dos ícones como 4% da largura da janela.
margin-top: 36%;: Define a margem superior dos ícones para posicioná-los abaixo do menu de navegação.
cursor: pointer;: Altera o cursor para a forma de mão quando o mouse está sobre os ícones.

.icones li {
    color: white;
    font-size: 24px;
    padding: 4px;
    transition: 0.3s;
}

Estiliza os itens de lista (os ícones).
color: white;: Define a cor dos ícones como branco.
font-size: 24px;: Define o tamanho da fonte dos ícones como 24px.
padding: 4px;: Adiciona espaçamento interno de 4px aos ícones.
transition: 0.3s;: Adiciona uma transição suave de 0.3 segundos para mudanças de estilo.

.icones li:hover {
    font-size: 28px;
    transition: 0.3s;
}

Quando o cursor paira sobre os ícones, esta regra é acionada.
Aumenta o tamanho da fonte dos ícones para 28px.
Mantém a mesma transição suave de 0.3 segundos para a mudança de tamanho.

Essa explicação abrange as partes principais do código HTML e CSS que criam os ícones de mídias sociais estilizados. Esses ícones são posicionados de forma fixa e exibidos com transições suaves ao interagir com eles. Isso pode ser uma ótima maneira de adicionar links para as páginas de mídias sociais do site de forma atraente.

Efeitos de Parallax e Botões Estilizados

Estrutura HTML

<div id="back" class="fundo" data-speed="15"></div>
<div id="back-1" class="parallax" data-speed="15"><div class="botao" id="bt">History</div></div>
<div id="back-2" class="parallax" data-speed="15"><div class="botao" id="bt-1">History</div></div>
<div id="back-3" class="parallax" data-speed="15"><div class="botao" id="bt-2">History</div></div>
<div id="back-4" class="parallax" data-speed="15"><div class="botao" id="bt-3">History</div></div>
<div id="back-5" class="parallax" data-speed="15"><div class="botao" id="bt-4">History</div></div>

Neste trecho de código HTML, uma série de elementos <div> é usada para criar seções de paralaxe com fundos de imagem. Cada elemento tem um ID único, uma classe para estilos de paralaxe e um atributo data-speed que controla a velocidade do efeito de paralaxe. Dentro de cada elemento, há um botão estilizado.

CSS da classe Fundo:

.fundo{
    background-repeat: no-repeat;
    background-position: 50% 0 ;
    background-attachment: fixed;
    background-size: 100%;
    width: 100%;
    min-height: 100%;
    max-width: 1920px;
    position: relative;
    margin: 0 auto;
}

background-repeat: no-repeat;
- Isso impede que o plano de fundo seja repetido em caso de tamanho insuficiente para preencher o elemento.
background-position: 50% 0;
- Define a posição vertical como 50% e a posição horizontal como 0. Isso mantém o plano de fundo centrado verticalmente e alinhado à esquerda horizontalmente.
background-attachment: fixed;
- Define o plano de fundo como fixo em relação à visualização. Isso cria um efeito de paralaxe onde o conteúdo rola sobre o plano de fundo.
background-size: 100%;
- Define o tamanho do plano de fundo como 100% da largura e altura do elemento. Isso garante que o plano de fundo cubra todo o espaço disponível.
width: 100%;
- Define a largura do elemento como 100%, ocupando a largura total do elemento pai.
min-height: 100%;
- Define a altura mínima do elemento como 100%, garantindo que ele ocupe pelo menos toda a altura do espaço disponível.
max-width: 1920px;
- Define a largura máxima do elemento como 1920 pixels. Isso limita a largura do elemento para não ultrapassar 1920 pixels.
position: relative;
- Define a posição do elemento como relativa, o que permite que outros elementos se posicionem em relação a ele.
margin: 0 auto;
- Define margens superior e inferior como 0 e margens laterais como “auto”. Isso centraliza horizontalmente o elemento na página, pois as margens laterais “auto” distribuem o espaço igualmente.

Essas propriedades em conjunto são frequentemente usadas para criar seções de paralaxe, onde o plano de fundo permanece fixo enquanto o conteúdo rola sobre ele. O plano de fundo preenche toda a área do elemento, proporcionando uma aparência visualmente agradável.

CSS para Fundos de Parallax

#back {
    background-image: url(../img/fundo.png);
}

Essas regras CSS estão definindo imagens de fundo para os elementos com os IDs #back, #back-1, #back-2, #back-3, #back-4 e #back-5.

O seletor #back refere-se a um elemento com o ID back.
background-image: url(../img/fundo.png); define a imagem de fundo para esse elemento. A imagem “fundo.png” está localizada no diretório “../img/”.

#back-1 {
    background-image: url(../img/homem-de-ferro.jpg);
}

O seletor #back-1 refere-se a um elemento com o ID back-1.
background-image: url(../img/homem-de-ferro.jpg); define a imagem de fundo para esse elemento. A imagem “homem-de-ferro.jpg” está localizada no diretório “../img/”.

As outras regras #back-2, #back-3, #back-4 e #back-5 seguem o mesmo padrão, definindo imagens de fundo para os respectivos elementos com IDs correspondentes.

Essas regras de fundo são uma parte fundamental para criar efeitos de paralaxe. Cada seção de paralaxe é acompanhada de uma imagem de fundo específica que permanece fixa enquanto o conteúdo rola sobre ela. Essa técnica contribui para a sensação de profundidade e movimento na página, criando uma experiência visualmente atraente para os usuários. Certifique-se de que as imagens estejam devidamente localizadas nos diretórios mencionados para que o código funcione corretamente.

CSS PARALLAX

.parallax {
    background-repeat: no-repeat;
    background-position: 99% 0;
    background-attachment: fixed;
    background-size: 89%;
    width: 100%;
    min-height: 100%;
    max-width: 1920px;
    position: relative;
    margin: 0 auto;
}

background-repeat: no-repeat;
- Impede que o plano de fundo seja repetido em caso de tamanho insuficiente para preencher o elemento.
background-position: 99% 0;
- Define a posição vertical como 0 e a posição horizontal como 99%. Isso mantém o plano de fundo alinhado à direita horizontalmente e alinhado ao topo verticalmente.
background-attachment: fixed;
- Define o plano de fundo como fixo em relação à visualização. Isso cria um efeito de paralaxe onde o conteúdo rola sobre o plano de fundo.
background-size: 89%;
- Define o tamanho do plano de fundo como 89% da largura e altura do elemento. Isso cria um ligeiro efeito de zoom na imagem de fundo, ajudando a criar um efeito visual mais atraente.
width: 100%;
- Define a largura do elemento como 100%, ocupando a largura total do elemento pai.
min-height: 100%;
- Define a altura mínima do elemento como 100%, garantindo que ele ocupe pelo menos toda a altura do espaço disponível.
max-width: 1920px;
- Define a largura máxima do elemento como 1920 pixels. Isso limita a largura do elemento para não ultrapassar 1920 pixels.
position: relative;
- Define a posição do elemento como relativa, o que permite que outros elementos se posicionem em relação a ele.
margin: 0 auto;
- Define margens superior e inferior como 0 e margens laterais como “auto”. Isso centraliza horizontalmente o elemento na página, pois as margens laterais “auto” distribuem o espaço igualmente.

Essas propriedades trabalham em conjunto para criar a aparência e os efeitos visuais das seções de paralaxe. A imagem de fundo permanece fixa à medida que o conteúdo rola sobre ela, e a combinação de posicionamento, tamanho e margens ajuda a criar uma composição visualmente atraente e equilibrada.

CSS da classe Botao

Vamos examinar cada propriedade da classe .botao para entender como ela afeta o estilo dos elementos a que ela é aplicada:

.botao {
    width: 144px;
    height: 24px;
    border-radius: 5px 5px 5px 5px;
    margin-top: 25%;
    position: absolute;
    margin-left: 12%;
    text-align: center;
    cursor: pointer;
    padding: 18px;
    font-family: sans-serif;
    font-size: 22px;
    transition: 0.3s;
}

width: 144px; e height: 24px;
- Define a largura e altura do botão. Isso define as dimensões físicas do botão.
border-radius: 5px 5px 5px 5px;
- Define o raio das bordas do botão. Isso cria cantos arredondados com um raio de 5 pixels.
margin-top: 25%;
- Define a margem superior do botão em 25% da altura do elemento pai. Isso pode ser usado para ajustar verticalmente a posição do botão.
position: absolute;
- Define o posicionamento do botão como absoluto em relação ao elemento pai. Isso permite que o botão seja posicionado com base nas coordenadas do bloco pai.
margin-left: 12%;
- Define a margem esquerda do botão em 12% da largura do elemento pai. Isso pode ser usado para ajustar horizontalmente a posição do botão.
text-align: center;
- Define o alinhamento do texto dentro do botão como centralizado.
cursor: pointer;
- Define o cursor do mouse como um ponteiro ao passar sobre o botão. Isso indica que o botão é clicável.
padding: 18px;
- Define o preenchimento interno do botão, criando um espaço entre o conteúdo do botão e suas bordas.
font-family: sans-serif;
- Define a família de fontes usada para o texto no botão. Neste caso, é uma fonte sans-serif.
font-size: 22px;
- Define o tamanho da fonte do texto no botão como 22 pixels.
transition: 0.3s;
- Define a duração da transição suave para propriedades que mudam quando o botão é interagido. Neste caso, uma transição de 0.3 segundos é aplicada.

Essas propriedades combinadas criam o estilo visual e interativo do botão. O botão terá cantos arredondados, tamanho definido, posicionamento absoluto, um cursor de ponteiro, preenchimento interno e transições suaves para melhorar a experiência do usuário ao interagir com ele.

CSS para estilizar os botões individualmente

--cor-black {
    background: #0c020b;
}

--cor-black é uma variável CSS customizada definida aqui para armazenar a cor de fundo preta (#0c020b).

#bt {
    background: var(--cor-black);
    color: #f846ff;
    box-shadow: 0px 0px 3px 2px #f846ff;
}

#bt se refere a um elemento com o ID “bt”.
background: var(--cor-black); define o fundo do botão com a cor armazenada na variável --cor-black.
color: #f846ff; define a cor do texto do botão como uma tonalidade de rosa (#f846ff).
box-shadow: 0px 0px 3px 2px #f846ff; aplica uma sombra de caixa ao botão com deslocamento x e y de 0px, um raio de desfoque de 3px e um raio de expansão de 2px, criando um efeito de sombra.

As regras #bt-1, #bt-2, #bt-3 e #bt-4 seguem o mesmo padrão, mas com cores de texto, sombras e cores de fundo diferentes.

#bt-1{
    background: var(--cor-black);
    color: #04f987;
    box-shadow: 0px 0px 3px 2px  #04f987;
}
#bt-2{
    background: var(--cor-black);
    color: #f700d7;
    box-shadow: 0px 0px 3px 2px #f700d7;
}
#bt-3{
    background: var(--cor-black);
    color: #823afb;
    box-shadow: 0px 0px 3px 2px #823afb;
}
#bt-4{
    background: var(--cor-black);
    color: #07defb;
    box-shadow: 0px 0px 3px 2px #07defb;
}

Efeito HOVER

#bt:hover, #bt-1:hover,
#bt-2:hover, #bt-3:hover,
#bt-4:hover {
    box-shadow: 0px 0px 16px 5px; 
    text-shadow: 0px 0px 25px;
    transition: 0.5s;
}

Essa regra se aplica quando um botão (ou qualquer outro elemento com um dos IDs correspondentes) é hovered, ou seja, quando o cursor do mouse está sobre ele.
box-shadow: 0px 0px 16px 5px; aplica uma sombra de caixa com um raio de desfoque maior, criando um efeito de destaque quando o botão é hover.
text-shadow: 0px 0px 25px; aplica uma sombra de texto para dar destaque ao texto do botão.
transition: 0.5s; define uma transição suave para as propriedades que mudam quando o botão é hovered. Neste caso, a transição leva 0.5 segundos para acontecer.

Essas regras de estilo personalizado ajudam a criar botões atrativos e interativos que mudam visualmente quando o usuário passa o mouse sobre eles, melhorando a usabilidade e a estética do site.

Efeito de rolagem suave

Antes da tag </body> é adicionada a seguinte tag:

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

Este elemento <script> está referenciando um arquivo JavaScript externo chamado “js.js”. Isso indica que o código JavaScript contido neste arquivo será executado no contexto da página.

Javascript

$(document).ready(function($) {
    $(".scroll").click(function(event) {
        event.preventDefault();
        $("html,body").animate({ scrollTop: $(this.hash).offset().top }, 1400);
    });
});

$(document).ready(function($) { ... });:
- Isso garante que o código dentro desta função seja executado somente após o documento HTML ser totalmente carregado e pronto para ser manipulado pelo JavaScript.
$(".scroll").click(function(event) { ... });:
- Esta linha seleciona todos os elementos com a classe “scroll” (que provavelmente são os links de navegação) e define um evento de clique para eles.
event.preventDefault();:
- Esta linha previne o comportamento padrão do link de navegação, que normalmente faria a página recarregar ou pular para a âncora sem a animação suave.
$("html,body").animate({ scrollTop: $(this.hash).offset().top }, 1400);:
- Essa linha faz a animação de rolagem suave. Aqui está o que acontece:
  - "html,body": Isso seleciona tanto o elemento <html> quanto o <body> para garantir que a rolagem seja suave em todos os navegadores.
  - .animate(): Isso inicia uma animação.
  - { scrollTop: $(this.hash).offset().top }: Isso define a posição final da rolagem como o valor de top do elemento referenciado pela âncora (hash) clicada. Isso cria um efeito de rolagem suave.
  - 1400: O valor 1400 é a duração da animação em milissegundos, controlando a velocidade da rolagem.

Em resumo, o código jQuery é usado para adicionar um efeito de rolagem suave aos links de navegação que possuem a classe “scroll”. Quando um desses links é clicado, a página rola suavemente até a âncora referenciada pelo link, em vez de realizar uma mudança brusca de posição na página. Isso melhora a experiência do usuário ao navegar pelo site.

OBRIGADO!

Agradecemos por acompanhar o artigo até aqui no site Code Kong! Esperamos que esta explanação detalhada sobre o código tenha sido útil para você compreender melhor como criar efeitos visuais impressionantes para o seu site.

Se você gostou do conteúdo, ficaríamos muito felizes se você compartilhasse este artigo com seus amigos e colegas. Compartilhar conhecimento é uma forma incrível de fortalecer a comunidade de desenvolvimento web.

Além disso, adoraríamos ouvir suas opiniões e sugestões. Deixe um comentário abaixo compartilhando suas ideias, dúvidas ou qualquer insight que você possa ter sobre este artigo. Suas contribuições são valiosas para nós!

Não deixe de nos seguir nas redes sociais para receber atualizações regulares sobre dicas, truques e tendências do mundo da programação. E se você ainda não o fez, inscreva-se no nosso canal do YouTube para receber vídeos informativos e tutoriais práticos.

Obrigado novamente por fazer parte da comunidade Code Kong. Juntos, continuaremos a explorar o emocionante mundo da codificação e do design web!

Populares

Mais Acessados

Construindo template de WebSite dos Avengers

Estrutura HTML

CSS para Estilos Globais

Menu de navegação

Estrutura HTML

CSS Styles

Criando ícones para redes sociais

Estrutura HTML

CSS Styles

Efeitos de Parallax e Botões Estilizados

Estrutura HTML

CSS da classe Fundo:

CSS para Fundos de Parallax

CSS PARALLAX

CSS da classe Botao

CSS para estilizar os botões individualmente

Efeito HOVER

Efeito de rolagem suave

Javascript

OBRIGADO!

Populares

Mais Acessados

Efeito 3D Interativo com CSS

Criando um Card Interativo com HTML e CSS

Animação de Borda usando CSS

Contato

Galeria

Newsletter