HTML, CSS ve JS'nin temel kavramlarını kullanarak, kısa sürede çalışır hale gelecek çekici bir zaman çizelgesine sahip olacaksınız.

Temel Çıkarımlar

  • CSS ve JavaScript kullanarak güçlü bir zaman çizelgesi oluşturmak kolaydır.
  • Zaman çizelgesinin HTML yapısının ana hatlarını çizerek ve zaman çizelgesi öğelerini CSS ile şekillendirerek başlayın.
  • JavaScript'i kullanarak zaman çizelgesine animasyon eklemeye devam edin. Kaydırma sırasında zaman çizelgesi öğelerini soldurmak için Intersection Observer API'sini kullanabilirsiniz.

Zaman çizelgeleri, kullanıcıların kronolojik olaylarda gezinmesine ve anlamalarına yardımcı olan güçlü görsel araçlardır. Dinamik CSS ve JavaScript ikilisini kullanarak etkileşimli bir zaman çizelgesinin nasıl oluşturulacağını keşfedin.

Zaman Çizelgesi Yapısını Oluşturma

Bu projenin tam kodunu buradan kontrol edebilirsiniz. GitHub deposu.

Başlamak için HTML yapısının ana hatlarını çizin. indeks.html. Etkileşimli zaman çizelgesinin temelini oluşturan etkinlikleri ve tarihleri ​​ayrı bileşenler olarak oluşturun.

instagram viewer 
<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">
<h2>Timelineh2>
<pclass="heading--title">
 Here is the breakdown of the time we anticipate <br />
 using for the upcoming event.
p>
div>


<divclass="Timeline__content">
<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 1h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">1span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>


<divclass="Timeline__item">
<divclass="Timeline__text">
<h3>Occasion 2h3>


<p>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Corporis, explicabo.
p>


<spanclass="circle">2span>
div>


<h3class="Timeline__date">12 Dec. 2023h3>
div>

div>
div>
section>
body>

Şu anda bileşeniniz şöyle görünüyor:

Zaman Çizelgeniz için Bir Düzen Seçin: Dikey vs. Yatay

Etkileşimli bir zaman çizelgesi tasarlarken dikey veya yatay stili seçebilirsiniz. Dikey zaman çizelgelerinin kullanımı özellikle telefonlarda kolaydır çünkü bu, web sitelerinin kaydırıldığı tipik yöndür. Zaman çizelgenizde çok fazla içerik varsa bu muhtemelen en uygun düzen olacaktır.

Ancak yatay zaman çizelgeleri geniş ekranlarda çekicidir ve yan yana kaydırmayı en aza indirebilen, daha az ayrıntıya sahip yaratıcı siteler için idealdir. Her stilin, farklı web sitesi türleri ve kullanıcı deneyimlerine uygun avantajları vardır.

Zaman Çizelgesini CSS ile Stillendirme

Zaman çizelgesi için şekillendireceğiniz üç tür görsel öğe vardır: çizgiler, düğümler ve tarih işaretçileri.

  • çizgiler: Sözde öğeden sonra Timeline__content:: kullanılarak oluşturulan merkezi dikey çizgi, zaman çizelgesinin omurgası görevi görür. Belirli bir genişlik ve renk ile tasarlanmış olup, zaman çizelgesi öğelerinin merkezine kesinlikle hizalanacak şekilde konumlandırılmıştır.
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • Düğümler: Circle sınıfı kullanılarak stillendirilen daireler, zaman çizelgesinde düğüm görevi görür. Bunlar kesinlikle her zaman çizelgesi öğesinin merkezinde konumlandırılmıştır ve zaman çizelgesi boyunca önemli noktaları oluşturan bir arka plan rengiyle görsel olarak farklıdırlar.
    .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;
    }
  • Tarih İşaretleyicileri: Timeline__date sınıfı kullanılarak stillendirilen tarihler, zaman çizelgesinin her iki tarafında da gösterilir. Konumlandırmaları her zaman çizelgesi öğesi için sol ve sağ arasında geçiş yaparak zaman çizelgesi boyunca kademeli, dengeli bir görünüm oluşturur.
    .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;}

Tüm stil setine göz atın GitHub deposu stil.css.

Stil verdikten sonra bileşeniniz şöyle görünmelidir:

JavaScript ile Animasyon Yapmak

Bu bileşeni canlandırmak için şunu kullanın: Kavşak Gözlemcisi API'si Kaydırma sırasında zaman çizelgesi öğelerini canlandırmak için. Aşağıdaki kodu ekleyin script.js.

1. İlk kurulum

Öncelikle Timeline__item sınıfına sahip tüm öğeleri seçin.

const timelineItems = document.querySelectorAll(".Timeline__item");

2. Zaman Çizelgesi Öğelerinin İlk Şekillendirilmesi

Her öğenin başlangıç ​​opaklığını 0 (görünmez) olarak ayarlayın ve Düzgün solma için CSS geçişi.

timelineItems.forEach((item) => {
 item.style.opacity = 0;
 item.style.transition = "opacity 0.6s ease-out";
}

Bu stilleri stil sayfasında ayarlayabilirsiniz ancak bunu yapmak tehlikeli olabilir. JavaScript çalışmazsa bu yaklaşım zaman çizelgenizi görünmez bırakır! Bu davranışı JavaScript dosyasında izole etmek buna iyi bir örnektir. aşamalı geliştirme.

3. Kavşak Gözlemcisi Geri Çağırma

Görüntü alanıyla kesiştiklerinde öğelerin opaklığını 1 (görünür) olarak değiştirmek için fadeInOnScroll işlevini tanımlayın.

const fadeInOnScroll = (entries, observer) => {
 entries.forEach((entry) => {
if (entry.isIntersecting) {
 entry.target.style.opacity = 1;
 }
 });
};

4. Kavşak Gözlemcisi Seçenekleri

Gözlemci için seçenekleri, animasyonun bir öğenin %10'u görünür olduğunda tetiklendiğini belirten 0,1 eşiğiyle ayarlayın.

const options = {
 root: null,
 rootMargin: "0px",
 threshold: 0.1,
}

5. Kesişme Gözlemcisini Oluşturma ve Kullanma

Bu seçeneklerle bir IntersectionObserver oluşturup bunu her zaman çizelgesi öğesine uygulayarak bitirin.

const observer = new IntersectionObserver(fadeInOnScroll, options);
timelineItems.forEach((item) => {
 observer.observe(item);
});

Nihai sonuç şöyle görünmelidir:

Zaman Çizelgesi Bileşeni En İyi Uygulamaları

Uyulması gereken bazı uygulamalar şunlardır:

  • Farklı ekran boyutları için zaman çizelgenizi optimize edin. Cihazlar arasında kusursuz bir kullanıcı deneyimi sağlamak için duyarlı tasarım tekniklerini öğrenin.
  • Sorunsuz animasyonlar sağlamak için verimli kodlama uygulamalarını kullanın.
  • Anlamsal HTML kullanın, uygun kontrast oranları ve daha iyi erişilebilirlik için ARIA etiketleri.

Zaman Çizelgenizi Hayata Geçirmek: Web Tasarımında Bir Yolculuk

Etkileşimli bir zaman çizelgesi oluşturmak yalnızca bilgi sunmakla ilgili değildir; ilgi çekici ve bilgilendirici bir deneyim yaratmakla ilgilidir. HTML yapısını, CSS stilini ve JavaScript animasyonlarını birleştirerek, değerli içerik sunarken hedef kitlenizi büyüleyen bir zaman çizelgesi oluşturabilirsiniz.