Criando uma linha do tempo interativa com CSS e JavaScript
Principais lições
Uma linha do tempo atraente pode ser construída sem esforço utilizando CSS e JavaScript.
Comece por organizar a progressão temporal dos eventos através da criação de uma estrutura HTML, englobando vários componentes, como títulos, parágrafos, imagens e outros recursos multimédia. Além disso, utilize as folhas de estilo em cascata (CSS) para conferir propriedades estéticas a estes componentes, criando assim uma interface visualmente apelativa que melhora a experiência do utilizador ao navegar na linha cronológica.
javascript// Configurar o observador de intersecção para elementos da linha de tempoconst observer = new IntersectionObserver(entries => {entries.forEach(entry => {// Se o elemento estiver visível, desvanece-o com a transição CSSif (entry.isIntersecting) {entry.target.classList.add(‘fade-in’);} else {entry.target.classList.remove(‘fade-in’);}});});// Adicionar a classe ‘fade-in’ a todos os elementos da linha de tempo inicialmenteconst timelineItems = document.querySelectorAll(’.timeline__item’);timelineItems.forEach(item => item.classList.add(‘fade-in’));// Observar cada elemento da linha de tempoconst timelineObserved
As linhas de tempo servem como ajudas visuais eficazes para navegar e compreender ocorrências cronológicas. Descubra como construir uma linha cronológica interactiva através da utilização de CSS e JavaScript, que, em conjunto, formam uma combinação potente a este respeito.
Construindo a estrutura da linha do tempo
Você pode conferir o código completo deste projeto no repositório do GitHub .
Para começar, é necessário estabelecer a arquitetura HTML no ficheiro “index.html”. Isto implica delinear as ocorrências e as marcações como elementos individuais, fornecendo assim uma base para uma linha temporal interligada que facilita a interação do utilizador.
<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>
<!-- More Items -->
</div>
</div>
</section>
</body>
Atualmente, o aspeto do seu componente pode ser descrito da seguinte forma:
Escolha um layout para sua linha do tempo: Vertical vs. Horizontal
Ao criar uma linha temporal interactiva, pode optar-se por uma orientação vertical ou horizontal. A primeira apresenta facilidade de utilização, particularmente em dispositivos móveis, dado o seu alinhamento com o comportamento de deslocação convencional. Além disso, se a linha cronológica contiver uma grande quantidade de informação, é lógico que essa configuração seja o mais conveniente possível.
As linhas cronológicas horizontais revelam-se visualmente cativantes quando apresentadas em ecrãs de grandes dimensões, especialmente nos casos em que é necessário um mínimo de deslocação lateral. Estes estilos adaptam-se bem a sítios Web criativos cujo conteúdo requer menos pormenores intrincados.Por outro lado, as linhas de tempo verticais podem adequar-se melhor a plataformas mais estruturadas ou densas em informação, onde é necessária uma navegação extensiva. A escolha entre estas duas alternativas depende, em última análise, das necessidades e preferências específicas dos designers e dos utilizadores.
Estilizar a linha de tempo com CSS
sendo os segmentos de linha, representações de nós e indicadores de tempo.
⭐ Linhas : Uma linha vertical central, criada usando o pseudo-elemento Timeline__content::after, serve como a espinha dorsal da linha do tempo. É estilizada com uma largura e cor específicas, posicionada de forma absoluta para se alinhar com o centro dos itens da linha de 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 círculo, agem como nós na linha do tempo. Eles sã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, aparecem em ambos os lados da linha do tempo. O seu posicionamento alterna entre a esquerda e a direita para cada item da linha de tempo, criando um aspeto escalonado e equilibrado ao longo da linha de 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 do GitHub em style.css .
Depois de aplicar os estilos necessários aos componentes HTML e CSS de uma página Web, o resultado final será um layout bem estruturado, visualmente atraente e fácil de navegar. O design pode incorporar vários elementos, como imagens, caixas de texto, tabelas, formulários e botões, todos dispostos de forma organizada para facilitar a interação do utilizador com o conteúdo. Além disso, a utilização de esquemas de cores, tipografia e espaço em branco pode contribuir para criar uma experiência visual harmoniosa para os utilizadores que navegam no sítio Web.
Animação com JavaScript
Para dar vida a este elemento, utilize a API Intersection Observer para animar as entradas da linha de tempo durante o deslocamento, incorporando o seguinte trecho de código no ficheiro script.js :
Configuração inicial
Inicialmente, escolha todos os componentes que possuam o atributo de classe “Timeline__item”.
const timelineItems = document.querySelectorAll(".Timeline__item");
Estilo inicial dos itens da linha de tempo
Para começar, defina o valor alfa de cada elemento como zero, o que os tornará invisíveis. Em seguida, utilize uma transição CSS para obter um efeito de desvanecimento contínuo da seguinte forma:
timelineItems.forEach((item) => {
item.style.opacity = 0;
item.style.transition = "opacity 0.6s ease-out";
}
Ao incorporar o estilo para a linha do tempo no arquivo JavaScript, em vez de na folha de estilo, é possível implementar efetivamente o aprimoramento progressivo.Esta estratégia garante que, mesmo que o JavaScript não seja executado corretamente, a estrutura básica e a disposição da linha cronológica permanecerão visíveis, proporcionando assim aos utilizadores algum nível de funcionalidade, independentemente de quaisquer problemas técnicos que possam surgir.
Chamada de retorno do observador de intersecção
Crie uma função fadeInOnScroll que modifique a opacidade dos elementos para um, tornando-os visíveis, à medida que entram em contacto com o ecrã do visualizador.
const fadeInOnScroll = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.style.opacity = 1;
}
});
};
Opções do observador de intersecção
Configure o observador definindo os seus parâmetros para incluir um valor de limiar de 0,1, o que indica que a animação será activada quando 10% de um objeto estiver visível.
const options = {
root: null,
rootMargin: "0px",
threshold: 0.1,
}
Criação e utilização do observador de intersecções
Conclua construindo um objeto IntersectionObserver com os parâmetros especificados e anexando-o a cada instância de um componente da linha de tempo.
const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
observer.observe(item);
});
O resultado final deve ter o seguinte aspeto:
O seu browser não suporta a etiqueta de vídeo.
Práticas recomendadas do componente da linha do tempo
Algumas práticas a serem seguidas incluem:
Melhore a adaptabilidade do seu layout implementando princípios de design responsivo, permitindo uma experiência de utilizador consistente e ininterrupta em vários ecrãs e dispositivos através da consideração cuidadosa da proporção, escala, grelhas fluidas, imagens, consultas multimédia e abordagens mobile-first.
A utilização de técnicas de programação eficazes é crucial para garantir um desempenho de animação sem falhas.
Utilize elementos HTML semanticamente apropriados, assegure taxas de contraste óptimas entre as cores do texto e do fundo e utilize atributos ARIA para melhorar a acessibilidade geral do seu conteúdo Web.
Dar vida à sua linha cronológica: Uma viagem no Web Design
A criação de uma cronologia interactiva transcende a mera apresentação de dados; pelo contrário, envolve a criação de um encontro cativante e esclarecedor para o espetador. A utilização da arquitetura HTML, da arte CSS e das técnicas de animação JavaScript permite o desenvolvimento de uma linha cronológica cativante que não só prende a atenção do público, como também transmite informações essenciais de uma forma cativante.