Como tornar seu site responsivo e interativo com CSS e JavaScript

Ter um site que seja responsivo e interativo é um requisito não escrito para todo proprietário de site. Os benefícios de ter um site interativo que se ajusta perfeitamente a qualquer tamanho de tela não podem ser exagerados.

Você deve criar uma experiência personalizada para cada usuário que visita seu site, e com várias propriedades CSS e algumas funções JavaScript, você pode fazer exatamente isso.

Neste artigo tutorial, você aprenderá como tornar seu site HTML e CSS responsivo e interativo.

Tornando Seu Site Interativo

Quando você está construindo um site, você começa de cima para baixo. Portanto, tornar seu site interativo é um processo que também deve começar pelo topo. Pegar este site de portfólio nós construímos como um exemplo. Tem um design limpo, mas não é totalmente interativo.

Cada item do menu muda de cor quando você passa o mouse sobre ele, mas como saber em qual seção do site você está? Bem, existem duas maneiras de fazer isso - ativar itens de menu com onscroll e onclick eventos.

A ativação de um item de menu cada vez que você rola para cima ou para baixo em um site exigirá o uso de uma função JavaScript que pode ser chamada de "activeMenu". Esta função terá acesso aos itens do menu na barra de navegação, bem como a cada seção do site. Felizmente, você pode fazer isso com o uso do querySelectorAll Seletor DOM.

No diretório do seu projeto, você precisará criar um novo arquivo JavaScript e vinculá-lo ao seu arquivo HTML usando a seguinte linha de código:

Em um roteiro tag, o src valor é o nome do arquivo JavaScript, que no exemplo acima é main.js.

O arquivo main.js

// usando javascript para ativar o item de menu onscroll
const li = document.querySelectorAll (". links");
const sec = document.querySelectorAll ("seção");
function activeMenu () {
deixe len = sec.length;
while (- len && window.scrollY + 97 li.forEach (ltx => ltx.classList.remove ("ativo"));
li [len] .classList.add ("ativo");
}
activeMenu ();
window.addEventListener ("scroll", activeMenu);

O querySelectorAll seletor no código acima pega todos os itens do menu usando o links classe. Ele também pega todas as seções do site usando o seção marcação. O activateMenu A função então pega o comprimento de cada seção e remove ou adiciona uma variável "ativa" dependendo da posição de rolagem do usuário.

Para que o código acima funcione, você terá que atualizar a folha de estilo do site do portfólio para incluir o seguinte código na seção da barra de navegação:

#navbar .menu li.active a {
cor: #fff;
}

Ativando itens de menu ao clicar

 // usando jquery para ativar o item de menu onclick
$ (documento) .on ('clique', 'li', função () {
$ (this) .addClass ('ativo'). siblings (). removeClass ('ativo')
})

Adicionar o código acima ao seu arquivo JavaScript ativará cada seção quando um usuário clicar no item de menu apropriado. No entanto, ele usa jQuery (uma biblioteca JavaScript) que realiza essa tarefa com uma quantidade mínima de código.

Um problema que você pode encontrar ao ativar cada item de menu ao clicar é que a barra de navegação cobrirá a parte superior de cada seção. Para evitar isso, você pode simplesmente inserir o seguinte código na seção de utilitários da folha de estilo:

seção{
scroll-margin-top: 4.5rem;
}

O código acima garantirá que, ao navegar para cada seção clicando em, a barra de navegação ficará 4,5 rem mais acima de cada seção (ou 72 px). Outro recurso legal para adicionar ao seu site é rolagem suave, que você pode realizar com o seguinte código CSS:

html {
comportamento de rolagem: suave;
}

Tornando sua página inicial interativa

Na maioria dos sites, o usuário verá seu primeiro botão na barra de navegação ou na página inicial. Além de parecer uma frase de chamariz, um botão também deve ser interativo. Uma ótima maneira de fazer isso é com o CSS :flutuar seletor, que atribui um novo estado a um elemento toda vez que o mouse de um usuário passa sobre ele.

No site do portfólio, o único link na página inicial tem o btn classe (que lhe dá a aparência de um botão). Então, para tornar este botão interativo, você pode simplesmente atribuir o :flutuar seletor para o btn classe.

Usando o seletor: hover

 .btn: hover {
plano de fundo: #fff;
cor azul;
borda: sólido azul;
raio da borda: 5px;
}

Adicionar o código acima à seção de utilitários do site do portfólio fará a transição do botão de um estado para outro quando você passar o mouse sobre ele.

Outro recurso interessante para a página inicial é uma animação de digitação, que usa typed.js (um script de animação de digitação jQuery).

Usando typed.js

// script de animação de texto de digitação jquery
var typed = new Typed (". digitando", {
strings: ["Desenvolvedor de Software"],
typeSpeed: 100,
backSpeed: 60,
loop: verdadeiro
});

Depois de adicionar o código acima ao arquivo JavaScript, você precisará fazer a seguinte alteração no HTML:

E eu sou um 

No código acima, você substitui o texto “Desenvolvedor de Software” no código original pela classe “digitação”, criando a animação de digitação.

Tornando outras seções do seu site interativas

Criando uma classe de utilitário de botão e usando o flutuar O seletor garantirá que todas as seções de sua página da web que tenham um botão sejam interativas. As propriedades de transição e transformação CSS também têm alguns excelentes recursos de animação que você pode adicionar ao seu site.

Se você tem uma galeria ou qualquer seção de imagem em seu site, pode usar as duas propriedades mencionadas acima para criar um efeito de foco em suas imagens. Adicionar o seguinte código CSS às imagens na seção do projeto do site do portfólio criará um efeito de transformação nas imagens da seção:

.img-container img {
largura máxima: 450px;
transição: todos os 0.3s atenuados;
cursor: ponteiro;
}
.img-container img: hover {
transformar: escala (1,2);
}

Tornando seu site responsivo

Ao criar um site responsivo, existem quatro tipos diferentes de dispositivos que você precisa considerar - desktops, laptops, tablets e smartphones. Além disso, cada um desses tipos de dispositivo também tem uma variedade de tamanhos de tela diferentes, mas ter essas quatro categorias é um bom lugar para começar.

Relacionado: Como usar consultas de mídia em HTML e CSS para criar sites responsivos

Em seu estado atual, o site do portfólio é bem exibido em desktops e laptops. Portanto, torná-lo responsivo significará criar um layout personalizado para tablets e smartphones.

A melhor maneira de conseguir um design responsivo com CSS e HTML é por meio de consultas de mídia. Você pode colocar uma consulta de mídia em um arquivo CSS ou HTML link marcação. A última abordagem facilita a escalabilidade e é também o método que demonstrarei.

Você precisará criar dois arquivos CSS adicionais. O primeiro arquivo CSS criará a estrutura de layout para pequenos laptops e tablets no modo paisagem. Ele terá uma largura máxima de 1100px, como você vê na seguinte tag de link:

Inserindo a linha de código acima dentro do cabeça tag do seu arquivo HTML (ou, neste caso, o arquivo do site do portfólio) irá garantir que cada dispositivo com uma largura de tela de 1100px e abaixo usarão o estilo no widescreen.css Arquivo.

O arquivo widescreen.css

/* Casa */
#navbar .container h1 a span {
Mostrar nenhum;
}
#home .home-content .text-3 span {
cor: # 000000;
}
/ * Portfólio * /
.projects {
justificar-conteúdo: centro;
}
.projeto{
flex: 0;
}
/* Cerca de */
.about-content {
direção flexível: coluna;
}
/* Contato */
.contact-content {
direção flexível: coluna;
}

O código acima produzirá um layout responsivo em dispositivos com tamanhos de tela de 1100 px ou menos, como você pode ver na saída abaixo:

O segundo arquivo CSS criará a estrutura de layout para smartphones e tablets no modo retrato. Ele terá uma largura máxima de 760px, como você pode ver na seguinte tag de link:

O arquivo mobile.css

/ * Navbar * /
#navbar .container h1 a span {
Mostrar nenhum;
}
#navbar .container .menu {
margem esquerda: 0rem;
}
# ham-menu {
largura: 35px;
altura: 30px;
margem: 30px 0 20px 20px;
cursor: ponteiro;
}
#navbar .container .menu-wrap .menu {
Mostrar nenhum;
}
.bar{
altura: 5px;
largura: 100%;
cor de fundo: #ffffff;
display: bloco;
raio da borda: 5px;
transição: facilidade de 0,3s;
}
# bar1 {
transform: translateY (-4px);
}
# bar3 {
transformar: traduzirY (4px);
}
/* Casa */
#casa{
display: flex;
background: url ("/ images / home.jpg") centro sem repetição;
altura: 100vh;
}
#home .container {
margem: 6rem 1rem 2rem 1rem;
preenchimento: 2rem;
}
#home .home-content .text-1 {
tamanho da fonte: 20px;
margem: 1,2 rem;
}
#home .home-content .text-2 {
tamanho da fonte: 45px;
peso da fonte: 500;
margem: 1rem;
}
#home .home-content .text-3 {
tamanho da fonte: 22px;
margem: 1,2 rem;
}
#home .home-content .text-3 span {
cor: # 0000ff;
peso da fonte: 600;
}
#home .container {
margem esquerda: 4,5 rem;
}
/* Cerca de */
#about .container {
preenchimento: 0;
}
/* Contato */
#contact .container {
preenchimento: 0;
}

O arquivo acima produzirá o seguinte layout de smartphone responsivo:

Outras maneiras de criar sites interativos responsivos

Saber como tornar seu site responsivo e interativo usando CSS e HTML é uma grande habilidade para se ter. Mas esses não são os únicos métodos para tornar seu site responsivo e interativo.

Muitos frameworks de front-end e até mesmo modelos em serviços como Joomla facilitam designs interativos responsivos.

15 modelos Joomla elegantes para sites responsivos

Quer criar um site para sua empresa ou blog? Experimente esses modelos Joomla.

Leia a seguir

Sobre o autor