29 CSS-aikajanaa elegantilla JavaScriptillä

Aika- tai aikajanat ovat toinen ylimääräinen elementti, jonka voimme integroida verkkosivustoon edistymisen tai kehityksen osoittamiseksi yrityksen tai yrityksen vuosina. Hyvin visuaalinen graafinen ilme, joka osaa säveltää tyylikkäästi typografian ja visuaalisten elementtien avulla, voi näyttää palvelun tai tuotteen ajan mittaan tekemät vaiheet.

Nämä 29 aikataulua, jotka löydät alla, ovat pystysuuntaisista aikatauluista kuten vaakasuorat. Löydät parhaan tarpeidesi mukaisen löytääksesi sen verkkosivun sivulta, jota olet kehittämässä asiakkaalle tai itsellesi. Meillä on kokoelma erittäin mielenkiintoisia aikatauluja, jotka ovat visuaalisesti miellyttäviä.

Aikajana vierittämällä

Aikajana, joka on HTML-, CSS- ja JavaScript-koodissa, sijoittaa itsensä sulavasti a hyvä minimalistinen mikä asettaa aksentin punaiselle vuosiluettelon vasemmalle puolelle ja mustalle fontille ja H2-kirjaimille. Parasta tässä aikajanassa on, että kun selaat sivua, vuosimuutos tehdään automaattisesti. Erinomainen viimeistely, muotoilu ja tulos.

Aikajana CSS: ssä

Tämä aikajana käyttää CSS-koodia, jotta se voidaan jopa määrittää oikein joissakin sen ominaisuuksissa. Siinä ei ole vieritystä kuten edellinenkin, mutta sille on ominaista sarja laatikoita ja sininen väri, joka antaa sille toisen erittäin tyylikkään kosketuksen ja lisää tämän julkaisun aikataulujen luetteloon.

Reagoiva aikajanan liukusäädin

Tämä aikajana on tehty Swiper JS -kirjastolla sisältämään HTML, CSS ja JavaScript-koodi. Siellä ei ole vieritystä, kun etenemme verkkosivun läpi, mutta se on asettaa vuodet oikealle puolelle ja painike, jolla voimme siirtyä seuraavaan, paitsi että voimme käyttää hiiren osoitinta tiettyyn vuoteen. Upea animaatio jokaisessa siirtymässä.

Edistynyt aikajana

Tämä aikajana erottuu HTML: n, CSS: n ja JavaScriptin käytöstä lukuun ottamatta mennä yksiväriseen, juuri punaisissa sävyissä. Sille on ominaista myös painikkeen käyttö, jonka avulla voit siirtyä eteenpäin tai taaksepäin aikajanalla, jonka tämä upea tuloskoodi merkitsee melko minimalistiseksi.

Aikajana kiinteällä otsikolla ja Flexboxilla

HTML- ja CSS-koodi kiinteää otsikkoa varten se pysyy kiinteänä sillä hetkellä, kun vieritämme sivulla. Hienoa hienovaraisuudesta olla kiinnostava aikajana kaikille nykyisille kehittäjille, jotka haluavat tulla esiin nykyisillä verkkosuunnittelustandardeilla.

Projektin aikajana

Tämä aikajana käyttää CSS: ää ja HTML: tä esittääkseen tärkeän aikajanan käytettäväksi kyseisenä ajanjaksona projektille. Kun vieritämme sitä, se käy läpi viikonpäivät, joten se on täydellinen toteuttaa se yrityksen omille yhteistyötyökaluille.

Aikajana

Aikajana sisään HTML, CSS ja JavaScript, jotka erottuvat muista visuaaliseen teemaan. Ja käymme selaamassa pystysuoraa aikajanaa, aina kun löydämme uuden valokuvan aikajanalta, siitä tulee taustakuva verkkosivulta, johon olemme sijoittaneet tämän koodin.

Hyperloop

Hyperloopu on aikajana, joka erottuu pikemminkin käytetystä suunnittelusta ja ohjelmoinnista vain HTML: ään ja CSS: ään. Sille on ominaista eri kokojen käyttö tekstin kirjasimessa pystysuoralla viivalla ja sarja laatikoita, jotka merkitsevät aikajanan jokaisen tärkeän hetken.

Pystysuuntainen aikajana

Aikaväli, joka etäistyy muusta visuaalisen kosketuksensa avulla. Sillä on hyvin nykyinen kaltevuus tausta ja joukko laatikoita, jotka merkitsevät kukin näistä väleistä. Ohjelmoitu CSS: ssä ja HTML: ssä.

Aikajana Flexboxissa

Yksi parhaista valmiista aikatauluista ja niin perustuu kortteihin sisällyttää kaikki tiedot, joita tarvitsemme kyseiselle aikavälille. Myös HTML: ssä ja CSS: ssä kehitettynä on otettava huomioon, että kaikilla korteilla on oltava sama korkeus ja leveys suurempien näyttöjen tilan laskemiseksi.

Aikajana DIV: ssä

Minimalistinen aikajana suunnittelussa ja niin on ollut kehitetty vain HTML: ssä ja CSS: ssä, joten sen toteutus voi olla erittäin nopeaa. Se soveltuu erinomaisesti aikajanan ilmaisemiseen tietovälineessä yksivärisen pintansa ansiosta.

Aikajana CSS: ssä ja HTML: ssä

Voit sijoittaa 400 × 300 -kokoiset kuvat tällä aikajanalla erotettuna viivojen vihreällä värillä sekä päivämäärien ja päivien tekstillä. Siinä ei ole animaatioita, ja sille on ominaista sen yksinkertainen muotoilu kaikilla tasoilla.

Kommentit ja palautteen aikajana

Aikajana on hyvin erilainen kuin muut sallimiseksi laittaa kortteja käyttäjien valokuviintai ainakin se on aluksi tarkoitus. Hyvällä visuaalisella tyylillä kortit käyttävät varjostusta melko tasaiselle aikajanalle ilman animaatioita.

Aikajanan aamu HTML- ja CSS-muodossa

Täydellinen aikajana siihen reagoimiseksi sille on ominaista, että se on HTML, CSS ja tarjoavat melko yksinkertaisen mutta hyvin liikkuvan aikajanan.

Aikajanan käyttöliittymä

Tämä HTML- ja CSS-koodi toimii täydellisesti esittää työpäivän harjoittelusta. Se on reagoiva otsikkokuvan ja joukon painikkeita, jotka näyttävät sen hyvin selkeästi ja puhtaasti visuaalisesti.

Aikajana vain CSS: ssä

Tälle aikajanalle on ominaista olla CSS: ssä ja a hyvin valittu värisarja: punainen ja vihreä. Vihreä peittää koko sivun kokonaan, valkoinen tekstiä ja jakolinjoja varten ja punainen erottamaan ajanjakson, jossa olemme. Voimme napsauttaa kutakin aikaväliä sijoittamalla sen ruutuun, joka ympäröi sitä ja korostaa sen.

Reagoiva aikajana V3

Ensimmäinen luettelon horisontaalisista aikatauluista HTML-, CSS- ja JavaScript-muodossa. Visuaalisesti erottuu mustien ja harmaiden värien käyttö sijoittaa vaakasuora viiva pisteillä. Jokainen intervalli korostetaan suuremmalla painolla lähteessä ja tekstisisällössä.

Aikajana värillisesti

Yksi vaakasuorista aikatauluista korkein visuaalinen laatu luettelossa. Erittäin interaktiivinen aikajana, jossa on erittäin hienovarainen ja hyvin esitetty animaatio, joka tarjoaa erinomaisen käyttökokemuksen joka kerta, kun jotain aikaväleistä painetaan. Se on tehty HTML CSS / Sass ja JavaScript / TypeScript (jquery.js).

Reagoiva historian aikajana

Täydellinen aikajana näyttää erilaiset tapahtumat kuvina historian aikavälistä. Se on vaakasuora ja reagoiva kehitetty HTML, CSS ja JavaScript.

Ryhmän aikajana

Tämä aikajana erottuu hyvästä siirtymisestä suoritetaan vaakasuoralla animaatiolla. Erinomaiset värit ja hieno muotoilu korostamaan kutakin aikaväliä. HTML-, CSS- ja JavaScriptiä on esittää korttisarja edustavan taustakuvan päälle.

Vaakasuora CSS ja HTML-aikajana

Hänen tekemänsä tunnettu Envato Tuts +, meille esitetään vaakasuora aikajana, jossa on sarja puhtaita ja peruskortteja. Tasaiset värit ja vaakasuora viiva, jossa on joukko punaisia pisteitä, jotka lukitsevat jokaisen aikavälin.

Aikajana CSS, HTML ja slick.js

Pastelli sävyt suunnittelussa aikajanalle, joka erottuu kunkin kuvan esittämisestä jokainen aikaväli näkyy. Siirtyminen kunkin kuvan ja aikavälien välillä tekee tästä aikajanasta erottuvan.

Aikajanan sekvenssi V1

Aikajana, joka erottuu painikkeet kullakin pystyviivalla kunkin välin ajan linkittääksesi koko näytön taustakuvan joka kerta, kun painamme sitä.

Vaaka-aikajana HTML CSS

Et voi napsauttaa missään tällä aikajanalla, joka on korostettu a: lla hieno muotoilu viisaalla väripaletilla ja sarjan voileipiä kullekin aikataululle. Animaatioita ei ole, mutta visuaalisesti se on silmille miellyttävä.

Aikajana Codyhouse

Tämä aikajana Codyhousen esittämä yksivärinen suunnittelussa ja on kehitetty HTML, CSS ja JavaScript. Se esittää minimalistisen viivan, jossa on joukko pisteitä napsautettavina aikaväleinä ja aiheuttaa vaakasuoran animaation alle puolessa sekunnissa. Yksinkertainen, mutta tehokas.