सीएसएस और जावास्क्रिप्ट के एक बिट के साथ 29 महान डिजाइन समय

स्क्रॉल समयरेखा

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

ये 29 टाइमलाइन जो आपको नीचे मिलेंगी ऊर्ध्वाधर समयरेखा से जैसा कि क्षैतिज होगा। आपको सबसे अच्छा वह मिलेगा जो आपकी आवश्यकताओं के अनुरूप है, इसे वेबसाइट के एक पृष्ठ पर खोजने की जरूरत है जिसे आप ग्राहक के लिए या अपने लिए विकसित कर रहे हैं। हम बहुत ही रोचक समयरेखाओं के संग्रह के साथ जा रहे हैं जो बहुत ही मनभावन हैं।

स्क्रॉल करके समयरेखा

स्क्रॉल समयरेखा

एचटीएमएल, सीएसएस और जावास्क्रिप्ट कोड में एक टाइमलाइन है जो इनायत के रूप में खुद को स्थिति में लाने के लिए है अच्छा न्यूनतम जो बाईं ओर वर्षों की सूची के लिए लाल पर उच्चारण करता है, और टाइपफेस और एच 2 के लिए काले रंग पर। इस समयरेखा के बारे में सबसे अच्छी बात यह है कि जैसे ही आप पृष्ठ पर स्क्रॉल करते हैं, वर्ष परिवर्तन स्वतः हो जाएगा। महान खत्म, डिजाइन और परिणाम।

सीएसएस में समयरेखा

सीएसएस समयरेखा गुण

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

उत्तरदायी समय स्लाइडर

उत्तरदायी समय स्लाइडर

यह टाइमलाइन HTML, CSS और JavaScript कोड को शामिल करने के लिए Swiper JS लाइब्रेरी के साथ बनाई गई है। जैसे-जैसे हम वेब पेज के माध्यम से आगे बढ़ते हैं, उसमें स्क्रॉलिंग नहीं होती वर्षों को दाईं ओर रखता है और एक बटन जिसके साथ हम अगले वर्ष पर जा सकते हैं, एक विशिष्ट वर्ष में जाने के लिए माउस पॉइंटर का उपयोग करने में सक्षम होने के अलावा। प्रत्येक बदलाव में महान एनीमेशन।

उन्नत समयरेखा

उन्नत समयरेखा

यह समयावधि HTML, CSS और JavaScript का उपयोग करने के लिए अलग है मोनोकॉलर में जाओ, ठीक लाल स्वर में। यह एक बटन के उपयोग की विशेषता भी है जो इस महान परिणाम कोड द्वारा चिह्नित समयरेखा में आगे बढ़ने या वापस जाने की अनुमति देता है जो काफी न्यूनतम है।

तय हेडर और फ्लेक्सबॉक्स के साथ समयरेखा

समयरेखा तय की

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

परियोजना घटनाक्रम

परियोजना घटनाक्रम

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

समयरेखा

समयरेखा

में एक समयरेखा HTML, CSS और जावास्क्रिप्ट जो बाकी हिस्सों से बाहर है दृश्य विषय के लिए। और यह है कि जैसा कि हम ऊर्ध्वाधर समयरेखा के माध्यम से स्क्रॉल करते हैं, हर बार जब हम समयरेखा में एक नई तस्वीर पाते हैं, तो यह वेब पेज की पृष्ठभूमि छवि बन जाएगी जहां हमने यह कोड रखा है।

Hyperloop

Hyperloop

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

लंबवत समय

लंबवत समय

एक अंतराल समयरेखा कि अपने दृश्य स्पर्श द्वारा बाकी से दूरी। यह डिजाइन में एक बहुत ही वर्तमान ढाल पृष्ठभूमि और बक्से की एक श्रृंखला है जो उन अंतरालों में से प्रत्येक को चिह्नित करता है। सीएसएस और HTML में क्रमादेशित।

फ्लेक्सबॉक्स में समयरेखा

टाइमलाइन फ्लेक्सबॉक्स

सबसे अच्छा समाप्त समयरेखा में से एक और वह कार्ड पर आधारित है उस समय अंतराल के लिए आवश्यक सभी जानकारी शामिल करना। एचटीएमएल और सीएसएस में भी विकसित किया गया है, यह ध्यान में रखा जाना चाहिए कि सभी कार्ड में बड़ी स्क्रीन के लिए स्थान की गणना करने के लिए समान ऊंचाई और चौड़ाई होनी चाहिए।

DIV में टाइमलाइन

समय रेखा div

डिजाइन में एक न्यूनतम समयरेखा और वह है केवल HTML और CSS में विकसित किया गया, इसलिए इसका कार्यान्वयन बहुत तेज हो सकता है। यह अपने मोनोक्रोम फ़िनिश के कारण किसी सूचना माध्यम में समयरेखा को व्यक्त करने के लिए पूरी तरह उपयुक्त है।

CSS और HTML में समयरेखा

सीएसएस समयरेखा

आप जगह दे सकते हैं 400 × 300 आकार के चित्र इस समय रेखा में हरे रंग की रेखाओं और तिथियों और दिनों के पाठ द्वारा प्रतिष्ठित है। इसका कोई एनिमेशन नहीं है और बल्कि सभी स्तरों पर इसकी सरल डिजाइन की विशेषता है।

टिप्पणियाँ और प्रतिक्रिया समयरेखा

टाइमलाइन टिप्पणियाँ

अनुमति देने के लिए दूसरों से बहुत अलग समयरेखा उपयोगकर्ताओं की तस्वीरों के साथ कार्ड लगाएं, या कम से कम पहले से यही इरादा है। महान दृश्य शैली के साथ, कार्ड एनिमेशन के बिना एक सपाट समयरेखा के लिए छायांकन का उपयोग करते हैं।

HTML और CSS में टाइमलाइन सुबह

उत्तरदायी समयरेखा

उत्तरदायी के लिए एक सही समयरेखा यह HTML, CSS होने की विशेषता है और एक बहुत ही सरल लेकिन बहुत मोबाइल समयरेखा प्रदान करते हैं।

टाइमलाइन यूआई

समयरेखा

HTML और CSS में यह कोड पूरी तरह से काम करता है कार्य दिवस पेश करें एक कसरत की। यह हेडर इमेज और बटन की एक श्रृंखला के साथ उत्तरदायी है जो इसे दृश्य पहलू में बहुत स्पष्ट और साफ तरीके से दिखाता है।

केवल सीएसएस में समयरेखा

सीएसएस समयरेखा

इस समय रेखा को सीएसएस में और ए द्वारा होने की विशेषता है अच्छी तरह से चुना गया रंग श्रृंखला: लाल और हरा। हरे रंग के पूरे पृष्ठ को पूरी तरह से कवर करने के लिए, पाठ के लिए सफेद और विभाजन रेखाएं, और उस समय अंतराल को भेद करने के लिए लाल, जिसमें हम हैं। हम प्रत्येक अंतराल पर क्लिक करके इसे एक बॉक्स के साथ रख सकते हैं जो इसे घेरता है और इसे हाइलाइट करता है।

उत्तरदायी समयरेखा V3

उत्तरदायी समयरेखा V3

HTML, CSS और जावास्क्रिप्ट में सूची में सबसे पहले क्षैतिज समयरेखा। नेत्रहीन के लिए बाहर खड़ा है काले और भूरे रंग का उपयोग बिंदुओं की एक श्रृंखला के साथ एक क्षैतिज रेखा रखने के लिए। प्रत्येक अंतराल को स्रोत में और पाठ सामग्री में अधिक वजन के साथ हाइलाइट किया गया है।

रंग में सराबोर समयरेखा

नेस्ट

क्षैतिज समयरेखा में से एक सूची में उच्चतम दृश्य गुणवत्ता। बहुत सूक्ष्म और अच्छी तरह से प्रस्तुत एनिमेशन के साथ एक अच्छी तरह से इंटरैक्टिव समयरेखा एक महान उपयोगकर्ता अनुभव प्रदान करने के लिए हर बार समय अंतराल में से एक को दबाया जाता है। इसके साथ बना है HTML सीएसएस / सैस और जावास्क्रिप्ट / टाइपस्क्रिप्ट (jquery.js).

उत्तरदायी इतिहास समयरेखा

उत्तरदायी कहानी

के लिए एक सही समयरेखा छवियों में विभिन्न घटनाओं को दिखाने के इतिहास में एक समय स्लॉट की। यह एचटीएमएल, सीएसएस और जावास्क्रिप्ट में विकसित किया गया क्षैतिज और उत्तरदायी है।

समूह समयरेखा

समयरेखा समूह

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

क्षैतिज सीएसएस और HTML समयरेखा

क्षैतिज एनवाटो

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

टाइमलाइन CSS, HTML और slick.js 

पास्टल टाइमलाइन

एक समय रेखा के लिए डिजाइन में पेस्टल टोन प्रत्येक चित्र की प्रस्तुति के लिए बाहर खड़ा है हर बार अंतराल दिखा रहा है। यह उन प्रत्येक छवियों और अंतरालों के बीच संक्रमण है जो इस समयरेखा को बाहर खड़ा करता है।

समयरेखा क्रम V1

समय क्रम

एक समयरेखा जो बाहर खड़ा है प्रत्येक ऊर्ध्वाधर लाइन पर बटन हर बार जब हम एक प्रेस करते हैं तो प्रत्येक पूर्ण स्क्रीन पृष्ठभूमि छवि को जोड़ने के लिए प्रत्येक अंतराल।

क्षैतिज समयरेखा HTML सीएसएस

टाइमलाइन एच.आर.

आप इस टाइमलाइन पर कहीं भी क्लिक नहीं कर पाएंगे जो कि हाइलाइट करता है a रंग पैलेट के बुद्धिमान विकल्प द्वारा उत्तम डिजाइन और प्रत्येक समयसीमा के लिए सैंडविच की एक श्रृंखला। कोई एनिमेशन नहीं हैं, लेकिन नेत्रहीन यह आंख को बहुत भाता है।

कोडी टाइमलाइन

समयरेखा कोडीहाउस

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

क्षैतिज समयरेखा

क्षैतिज समयरेखा

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

समयरेखा

समयरेखा

नीचे की सूची से केवल काली समयरेखा। तब वह उपयोग करता है प्रत्येक वर्ष और पाठ को अलग करने के लिए अलग-अलग रंग उसी की सीमा के रूप में एक ही समय में। इसमें प्रत्येक ग्रंथ के बीच से गुजरने के लिए एक प्रमुख एनीमेशन है।

समय

समय

यह टाइमलाइन डालता है रंग हरा पर उच्चारण पूरी तरह से स्थिर होना।

एक और क्षैतिज समयरेखा

एक और समयरेखा

यह कर सकते हैं पूर्ण स्क्रीन के पास एक छवि रखें एक समयरेखा के लिए जो नीले और भूरे रंग के टन के उपयोग के लिए खड़ा है और प्रत्येक वर्ष प्रतिनिधित्व करने वाले मंडलियों की एक श्रृंखला है।

याद मत करिएं सीएसएस और HTML में मेनू की एक और श्रृंखला.


अपनी टिप्पणी दर्ज करें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड के साथ चिह्नित कर रहे हैं *

*

*

  1. डेटा के लिए जिम्मेदार: मिगुएल elngel Gatón
  2. डेटा का उद्देश्य: नियंत्रण स्पैम, टिप्पणी प्रबंधन।
  3. वैधता: आपकी सहमति
  4. डेटा का संचार: डेटा को कानूनी बाध्यता को छोड़कर तीसरे पक्ष को संचार नहीं किया जाएगा।
  5. डेटा संग्रहण: ऑकेंटस नेटवर्क्स (EU) द्वारा होस्ट किया गया डेटाबेस
  6. अधिकार: किसी भी समय आप अपनी जानकारी को सीमित, पुनर्प्राप्त और हटा सकते हैं।