29 puikios dizaino laiko juostos CSS ir su šiek tiek „Javascript“

Slinkite laiko juosta

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

Slinkite laiko juosta

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

CSS laiko juostos ypatybės

Š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

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

Laiko juosta sutvarkyta

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

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

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

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

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“

Laiko juostos „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

Laiko skalė 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

CSS laiko juosta

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

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

Reaguojantis laiko planas

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

Chronologija

Š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

CSS laiko juosta

Š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

Reaguojantis laiko skalė V3

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

Lizdai

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

Reaguojanti istorija

Puikus laiko planas parodyti skirtingus įvykius vaizdais laiko tarpo istorijoje. Ji yra horizontali ir lengvai pritaikoma HTML, CSS ir „JavaScript“.

Grupės laiko juosta

Laiko juostos grupė

Š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

Horizontalusis envato

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 

Pastelinė laiko juosta

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

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

Laiko juosta HR

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

Laiko juosta „CodyHouse“

Š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

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ė

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

Laiko juosta

Ši laiko juosta pateikia žalios spalvos akcentas kad būtų visiškai statiška.

Kita horizontali laiko juosta

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


Straipsnio turinys atitinka mūsų principus redakcijos etika. Norėdami pranešti apie klaidą, spustelėkite čia.

Būkite pirmas, kuris pakomentuos

Palikite komentarą

Jūsų elektroninio pašto adresas nebus skelbiamas. Privalomi laukai yra pažymėti *

*

*

  1. Atsakingas už duomenis: Miguel Ángel Gatón
  2. Duomenų paskirtis: kontroliuoti šlamštą, komentarų valdymą.
  3. Įteisinimas: jūsų sutikimas
  4. Duomenų perdavimas: Duomenys nebus perduoti trečiosioms šalims, išskyrus teisinius įsipareigojimus.
  5. Duomenų saugojimas: „Occentus Networks“ (ES) talpinama duomenų bazė
  6. Teisės: bet kuriuo metu galite apriboti, atkurti ir ištrinti savo informaciją.