Ajajooned või ajajooned on veel üks lisaelement, mida saame integreeruda veebisaidile, et näidata edusamme või arengut ettevõtte või ettevõtte aastate jooksul. Hästi visuaalne graafiline väljend, mis, teades, kuidas seda tüpograafia ja visuaalsete elementidega elegantselt komponeerida, võib näidata teenuse või toote ajas tehtud samme.
Need 29 ajaskaala, mille leiate allpool, on vertikaalsetest ajajoontest nagu oleksid horisontaalid. Leiate parima, mis sobib teie vajadustega, et leida see veebisaidi lehelt, mida arendate kliendi või enda jaoks. Läheme väga huvitavate ajagraafikute kogumiga, mis on visuaalselt väga meeldivad.
Ajaskaala kerides
Ajaskaala, mis on HTML-is, CSS-is ja JavaScripti koodis, et positsioneerida ennast graatsiliselt kui hea minimalistlik mis paneb aktsendi punaseks vasakpoolsete aastate loendi jaoks ja mustaks fondi ja H2-de jaoks. Parim asi selle ajaskaala juures on see, et kui lehte sirvida, tehakse aasta muutus automaatselt. Suurepärane viimistlus, disain ja tulemus.
Ajaskaala CSS-is
See ajaskaala kasutab CSS-koodi, et oleks võimalik selle mõnes atribuudis isegi asjakohaselt konfigureerida. Sellel pole kerimist nagu eelmine, kuid seda iseloomustab ruudude ja sinine värv, et anda sellele veel üks väga elegantne puudutus ja liituda selle väljaande ajajoonte loendiga.
Reageeriv ajaskaala liugur
See ajaskaala koostatakse Swiper JS-i teegiga, et see sisaldaks HTML-i, CSS-i ja JavaScripti koodi. Veebilehe kaudu liikudes pole sellel kerimist, kuid siiski asetab aastad paremale poole ja nupp, millega saame minna järgmisele, peale selle, et saaksime hiirekursorit kasutada konkreetsele aastale minekuks. Suurepärane animatsioon igas üleminekus.
Täpsem ajaskaala
See ajajoon paistab silma HTML-i, CSS-i ja JavaScripti kasutamise poolest minna monokollorisse, täpselt punastes toonides. Seda iseloomustab ka nupu kasutamine, mis võimaldab teil selle suurepärase tulemuskoodiga tähistatud ajaskaalal edasi liikuda või tagasi minna, et olla üsna minimalistlik.
Fikseeritud päise ja Flexboxiga ajaskaala
HTML- ja CSS-kood fikseeritud päise jaoks see jääb fikseerituks hetkel, kui kerime lehel. Suurepärane peenus, et olla ajagraafik, mis pakub suurt huvi kõigile praegustele arendajatele, kes soovivad praeguste veebidisaini standarditega esile tõsta.
Projekti ajaskaala
See ajaskaala kasutab CSS-i ja HTML-i, et esitada oluline ajaskaala, mida kasutada konkreetse ajaperioodi jooksul projekti jaoks. Kui kerime seda nädalapäevad läbi, on see ideaalne selle rakendamiseks ettevõtte enda koostöös kasutatavate tööriistade jaoks.
Timeline
Ajaskaala sisse HTML, CSS ja JavaScript, mis eristuvad teistest visuaalse teema jaoks. Ja see on see, et vertikaalse ajaskaala sirvimisel saab iga kord, kui leiame ajaskaalalt uue foto, selle taustpildiks veebisaidi, kuhu oleme selle koodi paigutanud.
Hyperloop
Hyperloopu on ajaskaala, mis paistab silma pigem kasutatud kujunduse poolest programmeerimise eest muud kui HTML ja CSS. Seda iseloomustab erineva suuruse kasutamine tekstifondis vertikaalse joonega ja rida kaste, mis tähistavad ajaskaala iga olulist hetke.
Vertikaalne ajaskaala
Intervallide ajaskaala, mis distantseerub visuaalse puudutusega muust. Sellel on kujunduses väga praegune gradiendi taust ja rida kaste, mis tähistavad kõiki neid intervalle. Programmeeritud CSS-is ja HTML-is.
Ajaskaala Flexboxis
Üks parimaid viimistletud ajajooni ja nii põhineb kaartidel lisada kogu selle ajaintervalli jaoks vajalik teave. Ka HTML-is ja CSS-is arendatuna tuleb arvestada, et suuremate ekraanide ruumi arvutamiseks peavad kõik kaardid olema sama kõrguse ja laiusega.
Ajaskaala DIV-is
Minimalistlik ajaskaala kujunduses ja nii on olnud arendatud ainult HTML-is ja CSS-is, nii et selle rakendamine võib olla väga kiire. See sobib suurepäraselt ajaskaala väljendamiseks infokandjas tänu oma ühevärvilisele viimistlusele.
Ajaskaala CSS-is ja HTML-is
Saate paigutada 400 × 300 suurused pildid sellel ajaskaalal, mida eristab ridade roheline värv ning kuupäevade ja päevade tekst. Sellel pole animatsioone ja seda iseloomustab pigem lihtne disain kõigil tasanditel.
Kommentaarid ja tagasiside ajaskaala
Ajaskaala lubamisest teistest väga erinev pane kasutajate fotodega kaardidvõi vähemalt on see esialgu kavatsus. Suurepärase visuaalse stiili korral kasutavad kaardid varjundit animatsioonideta üsna tasase ajaskaala jaoks.
Ajaskaala hommik HTML- ja CSS-vormingus
Ideaalne ajakava sellele reageerimiseks seda iseloomustab HTML, CSS ja pakuvad üsna lihtsat, kuid väga liikuvat ajajoont.
Ajaskaala kasutajaliides
See HTML- ja CSS-kood sobib ideaalselt esitama tööpäeva trenni. See on reageeriv päise pildi ja mitmete nuppudega, mis näitavad seda visuaalselt väga selgelt ja puhtalt.
Ajaskaala ainult CSS-is
Seda ajaskaalat iseloomustab CSS-is olemine ja a hästi valitud värviseeria: punane ja roheline. Roheline, et katta kogu leht täielikult, valge teksti ja eraldusjoontega ning punane, et eristada ajavahemikku, milles viibime. Saame klõpsata igal intervallil, et asetada see kastiga, mis ümbritseb seda ja tõstab selle esile.
Reageeriv ajaskaala V3
Esimene HTML-i, CSS-i ja JavaScripti loendis olevast horisontaalsest ajajoonest. Visuaalselt paistab silma mustade ja hallide värvide kasutamine horisontaaljoone asetamiseks punktide reaga. Iga intervall on rõhutatud suurema kaaluga nii allikas kui ka teksti sisu.
Ajaskaala pesitses värviliselt
Üks horisontaalsetest ajajoontest kõrgeim visuaalne kvaliteet loendis. Hästi interaktiivne ajaskaala koos väga peene ja hästi esitatud animatsioonidega, et pakkuda suurepärast kasutuskogemust iga kord, kui ühte ajaintervalli vajutatakse. See on tehtud koos HTML CSS / Sass ja JavaScript / TypeScript (jquery.js).
Reageeriv ajaloo ajaskaala
Ideaalne ajakava näidata erinevaid sündmusi piltidena ajaloo ajapilu. See on horisontaalne ja reageeriv, et see on välja töötatud HTML-is, CSS-is ja JavaScriptis.
Grupi ajaskaala
See ajajoon paistab silma hea ülemineku poolest teostatud horisontaalse animatsiooniga. Suurepärase värvitooniga ja peen disain iga ajaintervalli esiletoomiseks. HTML-, CSS- ja JavaScripti vormingus esitatakse kaardirida, mis on asetatud tüüpilisele taustpildile.
Horisontaalne CSS ja HTML ajaskaala
Tema tehtud tuntud Envato Tuts +, meile esitatakse horisontaalne ajaskaala koos rea puhta ja põhikaardiga. Lamedad värvid ja horisontaaljoon punaste punktide seeriaga, mis lukustavad iga intervalli.
Ajaskaala CSS, HTML ja slick.js
Pastelltoonid kujunduses ajaskaala jaoks paistab silma iga kujutise esitlusega näidates iga ajaintervalli. See üleminek iga pildi ja intervallide vahel muudab selle ajaskaala silmapaistvaks.
Ajaskaala järjestus V1
Ajaskaala, mis paistab silma nupud igal vertikaalsel joonel iga intervalli linkimiseks täisekraani taustpildi iga kord, kui ühele vajutame.
Horisontaalne ajaskaala HTML CSS
Te ei saa sellel ajaskaalal klõpsata kuskil, mida tähistab a peen disain värvipaleti mõistliku valiku abil ja võileibade seeria igale ajajoonele. Animatsioone pole, kuid visuaalselt on see silmale väga meeldiv.
Ajaskaala Codyhouse
See ajaskaala Codyhouse on ühevärviline disainis ning see on välja töötatud HTML-is, CSS-is ja JavaScriptis. See esitab minimalistliku joone koos punktide reaga klõpsatavate intervallidena ja põhjustab horisontaalse animatsiooni vähem kui poole sekundi jooksul. Lihtne, aga võimas.
Horisontaalne ajaskaala
Teine HTML-i, CSS-i ja JavaScripti koostatud ajaskaala. Iseloomustab ühevärvilinesisaldab elegantset rohelise värviga kujundust, et pits asetada igale ajaintervalli tähistavale punktile. Iga kord, kui me ühte vajutame, algab väga sujuv kõrvalanimatsioon.
Nimetu ajaskaala
Ainus must ajajoon alumisest nimekirjast. Siis ta kasutab igal aastal ja teksti eristamiseks erinevaid värve samal ajal selle piiridega. Sellel on silmapaistev animatsioon, mida saab iga teksti vahel läbida.
Ajaskaala
See ajaskaala paneb rohelise värvi aktsent olla täiesti staatiline.
Teine horisontaalne ajaskaala
see võib asetage pilt täisekraani lähedale ajaskaala jaoks, mis paistab silma siniste ja hallide toonide pluss rida ringe, mis esindavad igal aastal.
Ära igatse veel üks CSS-i ja HTML-i menüüde sari.