HTML, CSS और JS की बुनियादी अवधारणाओं का उपयोग करके, आपके पास कुछ ही समय में एक आकर्षक टाइमलाइन तैयार और चालू हो जाएगी।

चाबी छीनना

  • सीएसएस और जावास्क्रिप्ट का उपयोग करके एक शक्तिशाली टाइमलाइन बनाना आसान है।
  • टाइमलाइन की HTML संरचना की रूपरेखा तैयार करके और CSS के साथ टाइमलाइन तत्वों को स्टाइल करके प्रारंभ करें।
  • जावास्क्रिप्ट का उपयोग करके टाइमलाइन में एनीमेशन जोड़ना जारी रखें। स्क्रॉल पर टाइमलाइन आइटम को फीका करने के लिए आप इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग कर सकते हैं।

टाइमलाइन शक्तिशाली दृश्य उपकरण हैं जो उपयोगकर्ताओं को कालानुक्रमिक घटनाओं को नेविगेट करने और समझने में मदद करते हैं। सीएसएस और जावास्क्रिप्ट की गतिशील जोड़ी का उपयोग करके एक इंटरैक्टिव टाइमलाइन बनाने का तरीका जानें।

समयरेखा संरचना का निर्माण

आप इस प्रोजेक्ट का पूरा कोड यहां से देख सकते हैं गिटहब रिपॉजिटरी.

आरंभ करने के लिए, HTML संरचना की रूपरेखा तैयार करें Index.html. इंटरैक्टिव टाइमलाइन की नींव रखते हुए, घटनाओं और तिथियों को अलग-अलग घटकों के रूप में बनाएं।

<body>
<sectionclass="timeline-section">
<divclass="container">
<divclass="Timeline__header">





instagram viewer



<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>

फिलहाल, आपका घटक इस तरह दिखता है:

अपनी टाइमलाइन के लिए एक लेआउट चुनें: वर्टिकल बनाम। क्षैतिज

इंटरैक्टिव टाइमलाइन डिज़ाइन करते समय, आप लंबवत या क्षैतिज शैली चुन सकते हैं। वर्टिकल टाइमलाइन का उपयोग करना आसान है, खासकर फोन पर, क्योंकि यह वह विशिष्ट दिशा है जिसमें वेबसाइटें स्क्रॉल करती हैं। यदि आपकी टाइमलाइन में बहुत अधिक सामग्री है, तो यह संभवतः सबसे सुविधाजनक लेआउट होगा।

हालाँकि, क्षैतिज समयरेखाएँ विस्तृत स्क्रीन पर आकर्षक होती हैं और कम विवरण वाली रचनात्मक साइटों के लिए बहुत अच्छी होती हैं, जो साइड-टू-साइड स्क्रॉलिंग को कम कर सकती हैं। प्रत्येक शैली की अपनी विशेषताएं हैं, जो विभिन्न प्रकार की वेबसाइटों और उपयोगकर्ता अनुभवों के लिए उपयुक्त हैं।

सीएसएस के साथ टाइमलाइन को स्टाइल करें

समयरेखा के लिए आप तीन प्रकार के दृश्य तत्वों को शैलीबद्ध करेंगे: रेखाएँ, नोड्स और दिनांक मार्कर।

  • पंक्तियां: छद्म-तत्व के बाद Timeline__content:: का उपयोग करके बनाई गई एक केंद्रीय ऊर्ध्वाधर रेखा, समयरेखा की रीढ़ के रूप में कार्य करती है। इसे एक विशिष्ट चौड़ाई और रंग के साथ स्टाइल किया गया है, जो बिल्कुल टाइमलाइन आइटम के केंद्र के साथ संरेखित करने के लिए स्थित है।
    .Timeline__content::after {
    background-color: var(--clr-purple);
    content: "";
    position: absolute;
    left: calc(50% - 2px);
    width: 0.4rem;
    height: 97%;
    z-index: -5;
    }
  • नोड्स: सर्कल क्लास का उपयोग करके स्टाइल किए गए सर्कल, टाइमलाइन पर नोड्स के रूप में कार्य करते हैं। ये बिल्कुल प्रत्येक टाइमलाइन आइटम के केंद्र में स्थित हैं और पृष्ठभूमि रंग के साथ दृष्टिगत रूप से अलग हैं, जो टाइमलाइन के साथ मुख्य बिंदु बनाते हैं।
    .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;
    }
  • दिनांक मार्कर: टाइमलाइन__डेट क्लास का उपयोग करके स्टाइल की गई तारीखें, टाइमलाइन के दोनों ओर दिखाई देती हैं। उनकी स्थिति प्रत्येक टाइमलाइन आइटम के लिए बाएँ और दाएँ के बीच बदलती रहती है, जिससे टाइमलाइन के साथ एक क्रमबद्ध, संतुलित रूप बनता है।
    .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;}

शैलियों का पूरा सेट देखें GitHub रेपो में स्टाइल.सीएसएस.

स्टाइल करने के बाद, आपका घटक इस तरह दिखना चाहिए:

जावास्क्रिप्ट के साथ एनिमेट करना

इस घटक को चेतन करने के लिए, उपयोग करें इंटरसेक्शन ऑब्जर्वर एपीआई स्क्रॉल पर टाइमलाइन आइटम को एनिमेट करने के लिए। इसमें निम्नलिखित कोड जोड़ें स्क्रिप्ट.जे.एस.

1. प्रारंभिक व्यवस्था

सबसे पहले, क्लास टाइमलाइन__आइटम के साथ सभी तत्वों का चयन करें।

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

2. टाइमलाइन आइटम की प्रारंभिक स्टाइलिंग

प्रत्येक आइटम की प्रारंभिक अपारदर्शिता को 0 (अदृश्य) पर सेट करें और a लागू करें सहज फ़ेडिंग के लिए सीएसएस संक्रमण.

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

आप इन शैलियों को स्टाइल शीट में सेट कर सकते हैं, लेकिन ऐसा करना खतरनाक होगा। यदि जावास्क्रिप्ट चलने में विफल रहता है, तो वह दृष्टिकोण आपकी टाइमलाइन को अदृश्य बना देगा! जावास्क्रिप्ट फ़ाइल में इस व्यवहार को अलग करना इसका एक अच्छा उदाहरण है प्रगतिशील वृद्धि.

3. इंटरसेक्शन ऑब्जर्वर कॉलबैक

जब आइटम व्यूपोर्ट के साथ प्रतिच्छेद करते हैं तो उनकी अपारदर्शिता को 1 (दृश्यमान) में बदलने के लिए एक फ़ेडइनऑनस्क्रॉल फ़ंक्शन को परिभाषित करें।

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

4. इंटरसेक्शन ऑब्जर्वर विकल्प

पर्यवेक्षक के लिए विकल्प सेट करें, 0.1 की सीमा के साथ यह दर्शाता है कि एनीमेशन तब ट्रिगर होता है जब किसी आइटम का 10% दिखाई देता है।

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

5. इंटरसेक्शन ऑब्जर्वर का निर्माण और उपयोग

इन विकल्पों के साथ एक इंटरसेक्शनऑब्जर्वर बनाकर और इसे प्रत्येक टाइमलाइन आइटम पर लागू करके समाप्त करें।

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

अंतिम परिणाम इस तरह दिखना चाहिए:

टाइमलाइन घटक सर्वोत्तम अभ्यास

पालन ​​करने योग्य कुछ प्रथाओं में शामिल हैं:

  • विभिन्न स्क्रीन आकारों के लिए अपनी टाइमलाइन अनुकूलित करें। सभी डिवाइसों पर सहज उपयोगकर्ता अनुभव सुनिश्चित करने के लिए रिस्पॉन्सिव डिज़ाइन तकनीक सीखें।
  • सुचारू एनिमेशन सुनिश्चित करने के लिए कुशल कोडिंग प्रथाओं का उपयोग करें।
  • सिमेंटिक HTML का उपयोग करें, बेहतर पहुंच के लिए उचित कंट्रास्ट अनुपात और ARIA लेबल।

अपनी टाइमलाइन को जीवंत बनाना: वेब डिज़ाइन में एक यात्रा

एक इंटरैक्टिव टाइमलाइन बनाना केवल जानकारी प्रस्तुत करने के बारे में नहीं है; यह एक आकर्षक और जानकारीपूर्ण अनुभव बनाने के बारे में है। HTML संरचना, CSS स्टाइलिंग और JavaScript एनिमेशन को मिलाकर, आप एक ऐसी टाइमलाइन तैयार कर सकते हैं जो मूल्यवान सामग्री प्रदान करते हुए आपके दर्शकों को मंत्रमुग्ध कर दे।