29 timelines de gran disseny en CSS i amb una mica de Javascript

Els timelines o línies de temps són un altre dels elements extra que podem integrar en un lloc web per mostrar el progrés o l'evolució en anys d'una empresa o companyia. Una expressió gràfica ben visual que sabent-compondre elegantment amb una tipografia i elements visuals, pot ensenyar els passos fets per un servei o producte al llarg de el temps.

Aquests 29 timelines que trobareu a continuació van des de les línies de temps en vertical com serien les horitzontals. Ja trobareu la millor que s'adapti a les vostres necessitats per ubicar-la en alguna pàgina del lloc web que estigueu desenvolupant per a un client o per a vosaltres mateixos. Anem amb una col·lecció de línies de temps d'allò més interessant i que són molt agradables visualment.

Timeline per scrolling

Una línia de temps que està en codi HTML, CSS i JavaScript per situar-elegantment com una bé minimalista que posa l'accent sobre el vermell per a la llista d'anys a la part esquerra, i en negre per a la tipografia i els H2. El millor d'aquest timeline és que segons aneu fent scroll a través de la pàgina es farà el canvi d'any automàticament. De gran acabat, disseny i resultat.

Línia de temps en CSS

Aquest timeline es val de codi CSS per fins i tot a poder ser configurat apropiadament en alguna de les seves propietats. No té scrolling com l'anterior, però es caracteritza per una sèrie de requadres i un color blau per donar-li un altre toc ben elegant i sumar-se a la llista de línies de temps d'aquesta publicació.

Slider timeline responsive

Aquest timeline està fet amb la llibreria swipe JS per incloure codi en HTML, CSS i JavaScript. No té scrolling segons avancem per la pàgina web, però si que situa els anys al lateral dret i un botó amb el qual podrem passar a el següent, a part de poder fer servir el punter de l'ratolí per anar a un any en concret. Gran animació en cadascuna de les transicions.

timeline avançat

Aquest timeline destaca per utilitzar HTML, CSS i JavaScript, a part de situar-se al monocolor, Justament en els tons vermells. També es caracteritza per l'ús d'un botó que permet avançar o retrocedir en la línia de temps marcada per aquest codi de gran resultat per ser bastant minimalista.

Timeline amb capçalera fixed i Flexbox

Codi en HTML i CSS per a una capçalera fixed que es quedarà fixada en el moment que fem scrolling a la pàgina. De gran subtilesa per ser una línia de temps de gran interès per a qualsevol desenvolupador actual que vulgui fer-se destacar pels estàndards de el disseny web actuals.

Timeline de projecte

Aquest timeline es val de CSS i HTML per presentar una línia de temps d'importància per usar-la per aquest període de temps en concret per a un projecte. Segons anem fent scrolling va passant pels dies de la setmana, així que és perfecte per a implementar-eines col·laboratives realitzades per la mateixa empresa.

Línia de temps

Una línia de temps en HTML, CSS i JavaScript que es distingeix de la resta pel tema visual. I és que segons anem fent scrolling pel timeline vertical, cada vegada que trobem una nova fotografia a la línia de temps, es convertirà en la imatge de fons de la pàgina web on hàgim situat aquest codi.

Hyperloop

Hyperloopu és una línia de temps que destaca més aviat pel disseny utilitzat i per ser programada res més que en HTML i CSS. Es caracteritza per l'ús de diferents mides a la font de el text amb una línia vertical i una sèrie de requadres que marquen cada moment important de l'timeline.

timeline vertical

Una línia de temps per intervals que es distancia de la resta pel seu toc visual. Té un fons de degradat molt actual en el disseny i una sèrie de requadres que marquen cada un d'aquests intervals. Programada en CSS i HTML.

Timeline a Flexbox

Una de les línies de temps de millor acabat i que es basa en targetes per incloure tota la informació que necessitem per a aquest interval de temps. També desenvolupada en HTML i CSS, cal tenir en compte que totes les targetes han de tenir la mateixa alçada i ample per calcular l'espai per a pantalles de major grandària.

Timeline a DIV

Un timeline minimalista en el disseny i que ha estat desenvolupat només en HTML i CSS, Així que la seva implementació pot ser ben ràpida. Val perfectament per expressar una línia de temps en un mitjà informatiu pel seu acabat en monocrom.

Timeline en CSS i HTML

podràs col·locar imatges de mida 400 × 300 en aquesta línia de temps distingida pel color verd de les línies i de el text de les dates i dies. No té animacions i es caracteritza més aviat pel seu disseny simple a tots els nivells.

Timeline de comentaris i feedback

Un timeline ben diferent als altres per permetre posar targetes amb les fotos dels usuaris, O al menys aquesta és la intenció a primeres. Amb gran estil visual, les targetes es valen d'ombrejats per un timeline sense animacions més aviat pla.

Timeline morning en HTML i CSS

Un timeline perfecte per responsive que es caracteritza per ser HTML, CSS i oferir una línia de temps bastant senzilla encara que molt mobile.

timeline UI

Aquest codi en HTML i CSS val perfectament per presentar la jornada de treball d'un entrenament. És responsive amb una imatge de capçalera i una sèrie de botons que el mostren d'una manera molt clara i neta en l'aspecte visual.

Timeline en només CSS

Aquest timeline es caracteritza per estar en CSS i per una sèrie de colors ben triats: el vermell i el verd. Verd per abastar tota la pàgina completament, el blanc per al text i línies de divisió, i el vermell per distingir l'interval de temps en què ens trobem. Podem prémer sobre cada interval per situar-lo amb un requadre que l'envolta i ho destaca.

Responsive timeline V3

El primer dels timeline horitzontals de la llista en HTML, CSS i JavaScript. Destaca visualment pel ús dels colors negre i gris per situar una línia horitzontal amb una sèrie de punts. Cada interval es presenta ressaltat amb un major pes en la font i en el contingut de el text.

Timeline nestled en color

Una de les línies de temps en horitzontal de major qualitat visual de la llista. Una línia de temps ben interactiva amb unes animacions molt subtils i ben presentades per oferir una gran experiència d'usuari cada vegada que es prem un dels intervals de temps. Està feta amb HTML CSS / Sass i JavaScript / TypeScript (jquery.js).

Timeline responsive d'història

Una línia de temps perfecta per mostrar en imatges els diferents esdeveniments d'una franja de temps de la història. És horitzontal i responsive per haver estat desenvolupada en HTML, CSS i JavaScript.

Timeline en grup

Aquest timeline destaca per una transició ben duta a terme amb una animació horitzontal. De gran colorit i un disseny exquisit per ressaltar cada un dels intervals de temps. Està en HTML, CSS i JavaScript per presentar una sèrie de targetes sobreposades sobre una imatge de fons representativa.

Timeline horitzontal CSS i HTML

Fet pel conegut Envato Tuts +, Se'ns presenta una línia de temps horitzontal amb una sèrie de targetes netes i bàsiques en el disseny. Colors plans i una línia horitzontal amb una sèrie de punts vermells que s'enclaven cada interval.

Timeline CSS, HTML i slick.js 

Tons pastís en el disseny per a un timeline que destaca per la presentació de cadascuna de les imatges que mostren cada interval de temps. És la transició entre cadascuna de les imatges i intervals el que fa destacar a aquesta línia de temps.

Timeline seqüència V1

Un timeline que destaca pels botons en cada línia vertical de cada interval per vincular una imatge de fons a pantalla completa cada vegada que premem en un.

Timeline horitzontal HTML CSS

No podràs fer clic a cap costat en aquesta línia de temps que destaca per un disseny exquisit per la sàvia elecció de la paleta de colors i una sèrie d'entrepans per a cada un dels timeline. No hi ha animacions, però visualment és molt agradable a la vista.

timeline Codyhouse

aquest timeline presentat per Codyhouse és monocolor en el disseny i està desenvolupat en HTML, CSS i JavaScript. Presenta una línia minimalista amb una sèrie de punts com intervals per ser premuts i provocar l'animació horitzontal de menys de mig segon. Simple, però de gran efecte.

timeline horitzontal

Una altra línia de temps realitzada en HTML, CSS i JavaScript. Caracteritzada pel monocolor, Tanca un elegant disseny amb un color verd per posar el cop de gràcia sobre cadascun dels punts que representen els intervals de temps. Cada vegada que premem un es comença una animació en lateral bé suau.

Timeline sense nom

L'única línia de temps en color negre de la llista en el fons. Després es val de diferents colors per diferenciar cada any i el text alhora que els límits de la mateixa. Té una animació destacada per passar entre cada un dels textos.

Línia de temps

Aquesta línia de temps posa l'accent en el color verd per a ser totalment estàtica.

Una altra línia de temps horitzontal

Es pot col·locar una imatge gairebé a pantalla completa per a una línia de temps que destaca per l'ús de el to blau i el gris més una sèrie de cercles que representen cada any.

No et perdis una altra sèrie de menús en CSS i HTML.