últimas postagens
Principais conclusões
- Uma linha do tempo poderosa é fácil de construir usando CSS e JavaScript.
- Comece delineando a estrutura HTML da linha do tempo e estilizando os elementos da linha do tempo com CSS.
- Continue adicionando animação à linha do tempo usando JavaScript. Você pode usar a API Intersection Observer para esmaecer os itens da linha do tempo na rolagem.
As linhas do tempo são ferramentas visuais poderosas que ajudam os usuários a navegar e compreender eventos cronológicos. Explore como criar uma linha do tempo interativa usando a dupla dinâmica de CSS e JavaScript.
Construindo a Estrutura da Linha do Tempo
Para começar, descreva a estrutura HTML em index.html. Crie eventos e datas como componentes separados, estabelecendo as bases para a linha do tempo interativa.
<body>
<section class="timeline-section">
<div class="container">
<div class="Timeline__header">
<h2>Timeline</h2><p class="heading--title">
Here is the breakdown of the time we anticipate <br />
using for the upcoming event.
</p>
</div><div class="Timeline__content">
<div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 1</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p><span class="circle">1</span>
</div><h3 class="Timeline__date">12 Dec. 2023</h3>
</div><div class="Timeline__item">
<div class="Timeline__text">
<h3>Occasion 2</h3><p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Corporis, explicabo.
</p><span class="circle">2</span>
</div><h3 class="Timeline__date">12 Dec. 2023</h3>
</div>
</div>
</div>
</section>
</body>
No momento, seu componente está assim:
Escolha um layout para sua linha do tempo: vertical x horizontal
Ao projetar uma linha do tempo interativa, você pode escolher um estilo vertical ou horizontal. As linhas do tempo verticais são fáceis de usar, especialmente em telefones, pois essa é a direção típica em que os sites rolam. Se a sua linha do tempo tiver muito conteúdo, esse provavelmente será o layout mais conveniente.
As linhas do tempo horizontais, no entanto, são atraentes em telas amplas e ótimas para sites criativos com menos detalhes, o que pode minimizar a rolagem lateral. Cada estilo tem suas vantagens, adequadas para diferentes tipos de sites e experiências do usuário.
Estilize a linha do tempo com CSS
Existem três tipos de elementos visuais que você estilizará para a linha do tempo: linhas, nós e marcadores de data.
- Linhas: Uma linha vertical central, criada usando o pseudoelemento Timeline__content::after, serve como a espinha dorsal da linha do tempo. Ele é estilizado com largura e cor específicas, posicionado absolutamente para alinhar com o centro dos itens da linha do tempo.
.Timeline__content::after {
background-color: var(--clr-purple);
content: "";
position: absolute;
left: calc(50% - 2px);
width: 0.4rem;
height: 97%;
z-index: -5;
} - Nós: Círculos, estilizados usando a classe Circle, atuam como nós na linha do tempo. Eles estão absolutamente posicionados no centro de cada item da linha do tempo e são visualmente distintos com uma cor de fundo, formando os pontos-chave ao longo da linha do tempo.
.circle {
position: absolute;
background: var(--clr-purple);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 6.8rem;
width: 100%;
aspect-ratio: 1/ 1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
font-size: 1.6rem;
} - Marcadores de data: as datas, estilizadas usando a classe Timeline__date, são exibidas em ambos os lados da linha do tempo. Seu posicionamento alterna entre esquerda e direita para cada item da linha do tempo, criando uma aparência escalonada e equilibrada ao longo da linha do tempo.
.Timeline__text,
.Timeline__date { width: 50%; }
.Timeline__item:nth-child(even) { flex-direction: row-reverse;}.Timeline_item:nth-child(even) .Timeline_date {
text-align: right;
padding-right: 8.3rem;
}.Timeline_item:nth-child(even) .Timeline_text { padding-left: 8.3rem;}
.Timeline_item:nth-child(odd) .Timeline_text {
text-align: right;
align-items: flex-end;
padding-right: 8.3rem;
}.Timeline_item:nth-child(odd) .Timeline_date { padding-left: 8.3rem;}
Confira o conjunto completo de estilos do Repositório GitHub em style.css.
Após estilizar, seu componente deverá ficar assim:
Animando com JavaScript
Para animar este componente, use a API Intersection Observer para animar itens da linha do tempo na rolagem. Adicione o seguinte código a script.js.
1. Configuração inicial
Primeiro, selecione todos os elementos com a classe Timeline__item.
const timelineItems = document.querySelectorAll(".Timeline__item");
2. Estilo inicial dos itens da linha do tempo
Defina a opacidade inicial de cada item como 0 (invisível) e aplique uma transição CSS para um desbotamento suave.
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Você poderia definir esses estilos na folha de estilos, mas isso seria perigoso. Se o JavaScript falhar na execução, essa abordagem deixaria sua linha do tempo invisível! Isolar esse comportamento no arquivo JavaScript é um bom exemplo de aprimoramento progressivo.
3. Retorno de chamada do observador de interseção
Defina uma função fadeInOnScroll para alterar a opacidade dos itens para 1 (visível) quando eles cruzam com a janela de visualização.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
4. Opções do observador de interseção
Defina as opções para o observador, com um limite de 0,1 indicando que a animação é acionada quando 10% de um item está visível.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
5. Criando e usando o observador de interseção
Finalize criando um IntersectionObserver com essas opções e aplicando-o a cada item da linha do tempo.
const observer = new IntersectionObserver(fadeInOnScroll, options);timelineItems.forEach((item) => {
observer.observe(item);
});
O resultado final deverá ficar assim:
Práticas recomendadas para componentes de linha do tempo
Algumas práticas a serem seguidas incluem:
- Otimize sua linha do tempo para diferentes tamanhos de tela. Aprenda técnicas de design responsivo para garantir uma experiência de usuário perfeita em todos os dispositivos.
- Use práticas de codificação eficientes para garantir animações suaves.
- Use HTML semântico, taxas de contraste adequadas e rótulos ARIA para melhor acessibilidade.
Dando vida à sua linha do tempo: uma jornada em web design
Construir uma linha do tempo interativa não envolve apenas apresentar informações; trata-se de criar uma experiência envolvente e informativa. Ao combinar estrutura HTML, estilo CSS e animações JavaScript, você pode criar uma linha do tempo que cative seu público e, ao mesmo tempo, forneça conteúdo valioso.