Laiko juostos arba laiko juostos yra dar vienas iš papildomų elementų, kuriuos galime integruoti į svetainę, kad būtų rodoma pažanga ar raida įmonės ar įmonės metais. Gerai vizuali grafinė išraiška, kuri, žinant, kaip ją elegantiškai sukomponuoti su šriftu ir vaizdiniais elementais, gali parodyti veiksmus, kuriuos per tam tikrą laiką atliko tarnyba ar produktas.
Šios 29 laiko juostos, kurias rasite žemiau, yra iš vertikalių laiko juostų kaip būtų horizontaliai. Geriausią, atitinkantį jūsų poreikius, rasite tinklalapio puslapyje, kurį kuriate klientui ar sau. Mes einame su labai įdomių laiko juostų kolekcija, kuri vizualiai labai patinka.
Laiko juosta slinkdama
Laiko juosta, esanti HTML, CSS ir „JavaScript“ kode, kad grakščiai įsitvirtintų kaip geras minimalistas kairėje pusėje esantis metų sąrašas kirčiuojamas raudonai, o šriftas ir H2 - juodai. Geriausias dalykas šioje laiko juostoje yra tai, kad slenkant puslapiu metai bus automatiškai pakeisti. Puikus apdaila, dizainas ir rezultatas.
Laiko juosta CSS
Ši laiko juosta naudoja CSS kodą, kad būtų galima net tinkamai sukonfigūruoti kai kurias jo ypatybes. Jame nėra slinkimo kaip ir ankstesnis, tačiau jis pasižymi langelių serija ir mėlyna spalva, suteikiančia dar vieną labai elegantišką prisilietimą ir prisijungiant prie šio leidinio laiko juostų sąrašo.
Reaguojantis laiko juostos slankiklis
Ši laiko juosta sukurta naudojant „Swiper JS“ biblioteką, kad būtų galima įtraukti HTML, CSS ir „JavaScript“ kodą. Ji neturi slinkimo, kai mes einame per tinklalapį, bet taip yra metai dedami dešinėje pusėje ir mygtukas, kuriuo galime pereiti prie kito, išskyrus galimybę naudoti pelės žymeklį tam tikriems metams. Puiki animacija kiekviename perėjime.
Išplėstinė laiko juosta
Ši laiko juosta išsiskiria tuo, kad naudoja HTML, CSS ir „JavaScript“, išskyrus eik į vienspalvį, tiksliai raudonais tonais. Jis taip pat pasižymi mygtuko naudojimu, kuris leidžia pereiti arba grįžti į laiko juostą, pažymėtą šiuo puikiu rezultato kodu, kad būtų gana minimalistinis.
Laiko juosta su fiksuota antrašte ir „Flexbox“
HTML ir CSS kodas fiksuotai antraštei ji liks fiksuota tuo metu, kai mes slinksime puslapyje. Labai subtilu, kad tai būtų labai įdomus laiko planas kiekvienam dabartiniam kūrėjui, kuris nori būti pabrėžtas dabartiniais interneto dizaino standartais.
Projekto laiko juosta
Ši laiko juosta naudoja CSS ir HTML, kad pateiktų svarbų laiko juostą, kuriai naudoti tą konkretų laiko tarpą projektui. Kai slenkame, einama per savaitės dienas, todėl puikiai tinka ją įdiegti pačių įmonės pagamintiems bendradarbiavimo įrankiams.
Chronologija
Laiko juosta HTML, CSS ir „JavaScript“, išsiskiriantis iš kitų vizualiai temai. Ir tai, kad slinkdami vertikalia laiko juosta, kiekvieną kartą laiko juostoje radę naują nuotrauką, ji taps tinklalapio, kuriame įdėjome šį kodą, fono paveikslėliu.
Hyperloop
„Hyperloopu“ yra laiko juosta veikiau išsiskiria naudojamu dizainu ir už tai, kad esate užprogramuoti tik HTML ir CSS. Jis apibūdinamas tuo, kad teksto šrifte yra naudojami skirtingi dydžiai su vertikalia linija ir langelių serija, pažyminti kiekvieną svarbų laiko juostos momentą.
Vertikali laiko juosta
Intervalo laiko juosta savo vaizdiniu prisilietimu atsiriboja nuo likusių. Jo dizainas turi labai dabartinį gradiento foną ir daugybę langelių, žyminčių kiekvieną iš šių intervalų. Programuojama CSS ir HTML.
Laiko juosta „Flexbox“
Viena iš geriausiai užbaigtų laiko juostų ir tai yra pagrįstas kortelėmis įtraukti visą mums reikalingą informaciją tam laiko intervalui. Taip pat sukurtas HTML ir CSS, reikia atsižvelgti į tai, kad visos kortelės turi būti vienodo aukščio ir pločio, kad būtų galima apskaičiuoti erdvę didesniems ekranams.
Laiko juosta DIV
Minimalistinis dizaino grafikas ir taip buvo sukurta tik HTML ir CSS, todėl jos įgyvendinimas gali būti labai greitas. Dėl savo vienspalvio apdailos jis puikiai tinka laiko juostai išreikšti informacinėje terpėje.
Laiko juosta CSS ir HTML
Galite įdėti 400 × 300 dydžio vaizdai šioje laiko juostoje išsiskiria žalia linijų spalva ir datų bei dienų tekstu. Jis neturi animacijų ir yra labiau būdingas paprastu dizainu visais lygmenimis.
Komentarų ir atsiliepimų laiko juosta
Laiko juosta labai skiriasi nuo kitų leidimo įdėti korteles su vartotojų nuotraukomis, ar bent jau iš pradžių toks ketinimas. Puikaus vizualinio stiliaus dėka kortelės naudoja šešėlį gana lygioms laiko juostoms be animacijų.
Laiko juostos rytas HTML ir CSS
Puikus laiko planas tam reaguoti jam būdinga HTML, CSS ir pasiūlyti gana paprastą, bet labai judrią laiko juostą.
Laiko juostos vartotojo sąsaja
Šis HTML ir CSS kodas puikiai tinka pristatyti darbo dieną treniruotės. Jis reaguoja antraštės atvaizdu ir mygtukų serijomis, kurios jį vizualiniu aspektu rodo labai aiškiai ir švariai.
Laiko juosta tik CSS
Šiai laiko juostai būdinga buvimas CSS ir a gerai parinkta spalvų serija: raudona ir žalia. Žalia, kad visiškai padengtų visą puslapį, balta - tekstui ir skiriamosioms eilutėms, ir raudona, kad būtų galima atskirti laiko intervalą, kuriuo esame. Mes galime spustelėti kiekvieną intervalą, kad įdėtume jį su langeliu, kuris jį supa ir paryškina.
Reaguojanti V3 laiko juosta
Pirmoji iš horizontalių laiko juostų sąraše HTML, CSS ir „JavaScript“. Vizualiai išsiskiria juodos ir pilkos spalvos naudojimas uždėti horizontalią liniją su taškų serija. Kiekvienas intervalas paryškinamas didesniu svoriu šaltinyje ir teksto turinyje.
Laiko juosta įsitaisiusi spalvoje
Viena iš horizontalių laiko juostų aukščiausia vaizdo kokybė sąraše. Labai interaktyvi laiko juosta su labai subtiliomis ir gerai pateikiamomis animacijomis, kad kiekvieną kartą paspaudus vieną iš laiko intervalų būtų suteikta puiki vartotojo patirtis. Jis pagamintas su HTML CSS / „Sass“ ir „JavaScript“ / „TypeScript“ (jquery.js).
Reaguojančios istorijos laiko juosta
Puikus laiko planas parodyti skirtingus įvykius vaizdais laiko tarpo istorijoje. Ji yra horizontali ir lengvai pritaikoma HTML, CSS ir „JavaScript“.
Grupės laiko juosta
Ši laiko juosta išsiskiria geru perėjimu atliekamas su horizontalia animacija. Puikios spalvos ir išskirtinio dizaino, pabrėžiant kiekvieną laiko intervalą. HTML, CSS ir „JavaScript“ yra kortelių serijos, uždėtos ant tipinio fono paveikslėlio.
Horizontali CSS ir HTML laiko juosta
Pagaminta jo žinomas „Envato Tuts +“, mums pateikiama horizontali laiko juosta su švarių ir pagrindinių kortelių dizainu. Plokščios spalvos ir horizontali linija su raudonų taškų serija, sujungiančia kiekvieną intervalą.
Laiko juosta CSS, HTML ir slick.js
Pasteliniai tonai, skirti laiko juostai išsiskiria kiekvieno iš vaizdų pateikimu rodant kiekvieną laiko intervalą. Tai yra perėjimas tarp kiekvieno vaizdo ir intervalų, dėl kurio ši laiko juosta išsiskiria.
Laiko juostos seka V1
Laiko juosta, kuri išsiskiria mygtukai ant kiekvienos vertikalios linijos kiekvieno intervalo susieti viso ekrano fono vaizdą kiekvieną kartą, kai paspaudžiame vieną.
Horizontali laiko juosta HTML CSS
Negalėsite spustelėti bet kurioje šioje laiko juostoje, kurią paryškina a išskirtinis dizainas, išmintingai pasirinkus spalvų paletę ir sumuštinių seriją kiekvienam laiko terminui. Animacijų nėra, bet vizualiai tai labai patinka akiai.
„Codyhouse“ laiko juosta
Ši laiko juosta pateikė Codyhouse yra vienspalvis dizainas ir yra sukurtas HTML, CSS ir „JavaScript“. Pateikiama minimalistinė linija su taškų serija kaip intervalais, kuriuos reikia spustelėti, o horizontali animacija sukelia mažiau nei pusę sekundės. Paprasta, bet galinga.
Horizontali laiko juosta
Kita laiko juosta sukurta HTML, CSS ir „JavaScript“. Būdinga viena spalva, jame yra elegantiškas žalios spalvos dizainas, kad nėriniai būtų uždėti ant kiekvieno taško, nurodančio laiko intervalus. Kiekvieną kartą, kai paspaudžiame vieną, prasideda labai sklandi šoninė animacija.
Bevardis laiko skalė
Vienintelė juoda laiko juosta iš apatinio sąrašo. Tada jis naudoja kiekvienais metais atskirti spalvas ir tekstą kartu su jo ribomis. Jis turi ryškią animaciją, kurią galima perduoti tarp kiekvieno teksto.
Laiko juosta
Ši laiko juosta pateikia žalios spalvos akcentas kad būtų visiškai statiška.
Kita horizontali laiko juosta
jis gali padėkite vaizdą šalia viso ekrano laiko juostai, kuri išsiskiria mėlynos ir pilkos spalvos naudojimu, taip pat apskritimų serija, atstovaujanti kiekvienais metais.
Nepraleiskite kita CSS ir HTML meniu serija.