२ great उत्कृष्ट डिजाइन टाइमलाइनहरू CSS मा र जाभास्क्रिप्टको एक बिटको साथ

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

यी २ time समयरेखा जुन तपाईंले तल पाउनुहुनेछ ठाडो समयरेखाबाट जस्तै क्षितिज हुनेछ। तपाइँले एक ग्राहकको लागि वा आफैंको लागि विकास गरिरहनु भएको वेबसाइटको पृष्ठमा तपाइँको आवश्यकताहरू मिल्ने तपाइँको आवश्यकतालाई मिल्ने तपाइँले पाउनुहुनेछ। हामी धेरै रोचक टाइमलाइनहरूको स with्ग्रहको साथ जाँदै छौं जुन धेरै नेत्रहीन मनमोहक हो।

स्क्रोल गरेर टाइमलाइन

HTML, CSS, र जाभास्क्रिप्ट कोड मा छ कि एक समयरेखा आफैलाई एक को रूप मा स्थिति स्थितिमा राख्न राम्रो न्यूनतम जुन वर्षको सूचीको लागि बायाँमा रातो र फन्ट र H2 का लागि कालो जोड दिन्छ। यस टाइमलाइनको बारेमा सबै भन्दा राम्रो कुरा यो हो कि तपाइँ पृष्ठ मार्फत स्क्रोल गर्दा, बर्ष परिवर्तन स्वचालित रूपमा हुनेछ। उत्कृष्ट समाप्त, डिजाईन र नतीजा।

CSS मा टाइमलाइन

यस टाइमलाईनले सीएसएस कोड प्रयोग गर्दछ यसको केही सम्पत्तीहरू ठीकसँग कन्फिगर गर्न सक्षम हुन। यो स्क्रोलिंग छैन अघिल्लो जस्तो, तर यसलाई बक्सको श्रृंखला र नीलो र by्गले चित्रण गर्दछ यसलाई अर्को धेरै रमाइलो स्पर्श दिन र यस प्रकाशनाको टाइमलाइनहरूको सूचीमा थप्न।

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

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

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

यस टाइमलाइन HTML, CSS र जाभास्क्रिप्ट को प्रयोगको लागि भिन्न छ मोनोकोलरमा जानुहोस्ठीक रातो टोनमा। यो बटनको प्रयोगले पनि चिह्नित गर्दछ जुन अगाडि बढ्न अनुमति दिन्छ वा टाइमलाइनमा पछाडि जानको लागि यो उत्कृष्ट नतिजा कोडले चिन्ह लगाएको छ अत्यधिक न्यूनतम हुन।

स्थिर हेडर र फ्लेक्सबक्सको साथ टाइमलाइन

HTML र CSS कोड एक निश्चित हेडरको लागि यो स्क्रोलि do्ग गर्ने बखत यो स्थिर रहनेछ पृष्ठमा। कुनै पनि हालको विकासकर्ता जो हालको वेब डिजाइन मापदण्डहरू द्वारा बाहिर खडा गर्न चाहन्छ को लागी महान चासोको समय रेखा हुन महान सूक्ष्मता को।

परियोजना समयरेखा

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

समय रेखा

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

हाइपरलिप

Hyperloopu एक समय रेखा हो जुन बरु प्रयोग डिजाइनको लागि बाहिर खडा र html र CSS मा भन्दा बढि केहि प्रोग्राम हुनको लागि। यो ठाडो रेखा र बक्सको श्रृंखलाको साथ पाठको फन्टमा फरक आकारको प्रयोगले चित्रण गर्दछ जुन टाइमलाइनको प्रत्येक महत्त्वपूर्ण पललाई मार्क गर्दछ।

ठाडो समयरेखा

एक अन्तराल समयरेखा उसको दृश्य टचले आफूलाई आरामबाट टाढा राख्छ। यसको डिजाइनमा हालसालको ग्रेडियन्ट पृष्ठभूमि र बक्सहरूको श्रृंखला छ जुन प्रत्येक अन्तराललाई चिन्ह लगाउँदछ। CSS र HTML मा प्रोग्राम गरिएको।

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

एक उत्तम समाप्त टाइमलाइनहरू मध्ये एक र त्यो कार्डमा आधारित छ सबै जानकारी समावेश गर्न हामी त्यो समय अंतराल को लागी आवश्यक छ। एचटिएमएल र सीएसएसमा पनि विकसित, यसलाई ध्यानमा राख्नुपर्दछ कि ठूला पर्दाका लागि ठाउँ गणना गर्न सबै कार्डहरूको उचाई र चौडाइ समान हुनुपर्छ।

DIV मा टाइमलाइन

डिजाइनमा एक न्यूनतम समयरेखा र त्यो भयो HTML र CSS मा मात्र विकसित भयो, त्यसैले यसको कार्यान्वयन धेरै छिटो हुन सक्छ। यो एक मोनोक्रोम समाप्त भएको कारणले गर्दा सूचना माध्यममा टाइमलाइन व्यक्त गर्नका लागि एकदम उपयुक्त छ।

CSS र HTML मा टाइमलाइन

तपाईं राख्न सक्नुहुन्छ 400 × 300 आकार छविहरू यस टाइमलाइनमा लाइनहरूको हरियो र color र मिति र दिनहरूको पाठले छुट्याएको छ। योसँग कुनै एनिमेशन छैन र बरु सबै तहमा यसको सरल डिजाइन द्वारा चित्रण गरिएको छ।

प्रतिक्रियाहरू र प्रतिक्रिया समयरेखा

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

HTML र CSS मा टाइमलाइन बिहान

त्यो उत्तरदायीको लागि उत्तम समयरेखा यो HTML, CSS को रूपमा रहेको हो र एक धेरै सरल तर धेरै मोबाइल टाइमलाइन प्रदान गर्दछ।

समयरेखा UI

HTML र CSS मा यो कोड उत्तम रूपमा काम गर्दछ काम दिन प्रस्तुत गर्नुहोस् एक कसरत को। यो हेडर छवि र बटनहरूको श्रृंखलासँग उत्तरदायी छ जुन दृश्य पक्षमा यसलाई धेरै स्पष्ट र स्वच्छ तरिकाले देखाउँदछ।

CSS मा मात्र टाइमलाइन

यो टाइमलाइन CSS मा भएको र द्वारा a द्वारा विशेषता गरिएको छ राम्रोसँग छनौट र series्ग श्रृंखला: रातो र हरियो। पूरा पृष्ठ पूरै कभर गर्नको लागि हरियो, पाठ र विभाजन रेखाका लागि सेतो, र रातो हामी अन्तरालमा छुट्ट्याउन भिन्न छौं। हामी प्रत्येक अन्तराल मा क्लिक गर्न सक्छौं यसलाई बाकसको साथ राख्नको लागि यसले वरिपरिको र यसलाई हाइलाइट गर्दछ।

उत्तरदायी टाइमलाइन V3

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

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

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

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

का लागि एक उत्तम समयरेखा छविहरूमा बिभिन्न घटनाहरू देखाउनुहोस् इतिहासमा एक समय स्लट को। यो क्षैतिज र उत्तरदायी हो HTML, CSS र जाभास्क्रिप्टमा विकसित गर्नका लागि।

समूह टाइमलाइन

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

तेर्सो CSS र HTML टाइमलाइन

उहाँद्वारा बनाइएको ज्ञात एनभाटो टट्स +, हामी डिजाइनमा सफा र आधारभूत कार्डहरूको श्रृंखलाको साथ तेर्सो टाइमलाइन प्रस्तुत गर्दछौं। फ्ल्याट र colorsहरू र रातो थोप्लाहरूको श्रृ with्खलाको साथ एक तेर्सो रेखा जुन प्रत्येक अन्तराललाई रोक्दछ।

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

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

टाइमलाइन अनुक्रम V1

एक टाइमलाइन को लागि बाहिर खडा प्रत्येक ठाडो लाइनमा बटनहरू प्रत्येक अन्तराल को एक पूरा स्क्रीन पृष्ठभूमि छवि लि to्क गर्न प्रत्येक पटक हामी एक मा थिच्नुहोस्।

तेर्सो टाइमलाइन HTML CSS

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

टाइमलाइन कोडिहाउस

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

तेर्सो समयरेखा

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

बेनामी समयरेखा

तल सूचीबाट केवल कालो टाइमलाइन। त्यसपछि उसले प्रयोग गर्दछ विभिन्न र andहरू प्रत्येक वर्ष र पाठ फरक गर्न यसको सीमाहरूको रूपमा एकै समयमा। यो प्रत्येक पाठ बीच पार गर्न एक उत्कृष्ट एनिमेसन छ।

समय रेखा

यो समयरेखा राख्छ हरियो रंगमा एक्सेन्ट पूर्ण रूपमा स्थिर हुन।

अर्को तेर्सो टाइमलाइन

यो हुन सक्छ पूर्ण स्क्रिनको नजिक छवि राख्नुहोस् समयरेखाका लागि जुन नीलो र खरानी रंगको प्रयोगको लागि बाहिर खडा हुन्छ, साथै सर्कलहरूको श्रृंखला जुन प्रत्येक वर्ष प्रतिनिधित्व गर्दछ।

याद नगर्नुहोस् CSS र HTML मा मेनुको अर्को श्रृंखला.