Los timelines o lĆneas de tiempo son otro de los elementos extra que podemos integrar en un sitio web para mostrar el progreso o la evoluciĆ³n en aƱos de una empresa o compaƱĆa. Una expresiĆ³n grĆ”fica bien visual que sabiĆ©ndola componer elegantemente con una tipografĆa y elementos visuales, puede enseƱar los pasos dados por un servicio o producto a lo largo del tiempo.
Estos 29 timelines que encontrarĆ©is a continuaciĆ³n van desde las lĆneas de tiempo en vertical como serĆan las horizontales. Ya encontrarĆ©is la mejor que se adapte a vuestras necesidades para ubicarla en alguna pĆ”gina del sitio web que estĆ©is desarrollando para un cliente o para vosotros mismos. Vamos con una colecciĆ³n de lĆneas de tiempo de lo mĆ”s interesante y que son muy agradables visualmente.
Timeline por scrolling
Una lĆnea de tiempo que estĆ” en cĆ³digo HTML, CSS y JavaScript para situarse elegantemente como una bien minimalista que pone el acento sobre el rojo para la lista de aƱos en la parte izquierda, y en negro para la tipografĆa y los H2. Lo mejor de este timeline es que segĆŗn vayĆ”is haciendo scroll a travĆ©s de la pĆ”gina se harĆ” el cambio de aƱo automĆ”ticamente. De gran acabado, diseƱo y resultado.
LĆnea de tiempo en CSS
Este timeline se vale de cĆ³digo CSS para incluso poder ser configurado apropiadamente en alguna de sus propiedades. No tiene scrolling como el anterior, pero se caracteriza por una serie de recuadros y un color azul para darle otro toque bien elegante y sumarse a la lista de lĆneas de tiempo de esta publicaciĆ³n.
Slider timeline responsive
Este timeline estĆ” hecho con la librerĆa Swiper JS para incluir cĆ³digo en HTML, CSS y JavaScript. No tiene scrolling segĆŗn avancemos por la pĆ”gina web, pero sĆ que sitĆŗa a los aƱos en el lateral derecho y un botĆ³n con el que podremos pasar al siguiente, aparte de poder usar el puntero del ratĆ³n para ir a un aƱo en concreto. Gran animaciĆ³n en cada una de las transiciones.
Timeline avanzado
Este timeline destaca por usar HTML, CSS y JavaScript, aparte de situarse en el monocolor, justamente en los tonos rojos. TambiĆ©n se caracteriza por el uso de un botĆ³n que permite avanzar o retroceder en la lĆnea de tiempo marcada por este cĆ³digo de gran resultado para ser bastante minimalista.
Timeline con cabecera fixed y Flexbox
CĆ³digo en HTML y CSS para una cabecera fixed que se quedarĆ” fijada en el momento que hagamos scrolling en la pĆ”gina. De gran sutileza para ser una lĆnea de tiempo de gran interĆ©s para cualquier desarrollador actual que quiera hacerse destacar por los estĆ”ndares del diseƱo web actuales.
Timeline de proyecto
Este timeline se vale de CSS y HTML para presentar una lĆnea de tiempo de importancia para usarla para ese periodo de tiempo en concreto para un proyecto. SegĆŗn vamos haciendo scrolling va pasando por los dĆas de la semana, asĆ que es perfecto para implementarlo para herramientas colaborativas realizadas por la propia empresa.
Timeline
Una lĆnea de tiempo en HTML, CSS y JavaScript que se distingue del resto por el tema visual. Y es que segĆŗn vayamos haciendo scrolling por el timeline vertical, cada vez que encontremos una nueva fotografĆa en la lĆnea de tiempo, se convertirĆ” en la imagen de fondo de la pĆ”gina web donde hayamos situado este cĆ³digo.
Hyperloop
Hyperloopu es una lĆnea de tiempo que destaca mĆ”s bien por el diseƱo utilizado y por ser programada nada mĆ”s que en HTML y CSS. Se caracteriza por el uso de distintos tamaƱos en la fuente del texto con una lĆnea vertical y una serie de recuadros que marcan cada momento importante del timeline.
Timeline vertical
Una lĆnea de tiempo por intervalos que se distancia del resto por su toque visual. Tiene un fondo de degradado muy actual en el diseƱo y una serie de recuadros que marcan cada uno de esos intervalos. Programada en CSS y HTML.
Timeline en Flexbox
Una de las lĆneas de tiempo de mejor acabado y que se basa en tarjetas para incluir toda la informaciĆ³n que necesitamos para ese intervalo de tiempo. TambiĆ©n desarrollada en HTML y CSS, hay que tener en cuenta que todas las tarjetas han de tener la misma altura y ancho para calcular el espacio para pantallas de mayor tamaƱo.
Timeline en DIV
Un timeline minimalista en el diseƱo y que ha sido desarrollado solamente en HTML y CSS, asĆ que su implementaciĆ³n puede ser bien rĆ”pida. Vale perfectamente para expresar una lĆnea de tiempo en un medio informativo por su acabado en monocromo.
Timeline en CSS y HTML
PodrĆ”s colocar imĆ”genes de tamaƱo 400Ć300 en esta lĆnea de tiempo distinguida por el color verde de las lĆneas y del texto de las fechas y dĆas. No tiene animaciones y se caracteriza mĆ”s bien por su diseƱo simple a todos los niveles.
Timeline de comentarios y feedback
Un timeline bien distinto a los demĆ”s por permitir poner tarjetas con las fotos de los usuarios, o al menos esa es la intenciĆ³n a primeras. Con gran estilo visual, las tarjetas se valen de sombreados para un timeline sin animaciones mĆ”s bien plano.
Timeline morning en HTML y CSS
Un timeline perfecto para responsive que se caracteriza por ser HTML, CSS y ofrecer una lĆnea de tiempo bastante sencilla aunque muy mobile.
Timeline UI
Este cĆ³digo en HTML y CSS vale perfectamente para presentar la jornada de trabajo de un entrenamiento. Es responsive con una imagen de cabecera y una serie de botones que lo muestran de una manera muy clara y limpia en el aspecto visual.
Timeline en solo CSS
Este timeline se caracteriza por estar en CSS y por una serie de colores bien elegidos: el rojo y el verde. Verde para abarcar toda la pĆ”gina por completo, el blanco para el texto y lĆneas de divisiĆ³n, y el rojo para distinguir el intervalo del tiempo en el que nos encontramos. Podemos pulsar sobre cada intervalo para situarlo con un recuadro que lo rodea y lo destaca.
Responsive timeline V3
El primero de los timeline horizontales de la lista en HTML, CSS y JavaScript. Destaca visualmente por el uso de los colores negro y gris para situar una lĆnea horizontal con una serie de puntos. Cada intervalo se presenta resaltado con un mayor peso en la fuente y en el contenido del texto.
Timeline nestled en color
Una de las lĆneas de tiempo en horizontal de mayor calidad visual de la lista. Una lĆnea de tiempo bien interactiva con unas animaciones muy sutiles y bien presentadas para ofrecer una gran experiencia de usuario cada vez que se pulsa uno de los intervalos de tiempo. EstĆ” hecha con HTML CSS/Sass y JavaScript/TypeScript (jquery.js).
Timeline responsive de historia
Una lĆnea de tiempo perfecta para mostrar en imĆ”genes los distintos eventos de una franja de tiempo de la historia. Es horizontal y responsive para haber sido desarrollada en HTML, CSS y JavaScript.
Timeline en grupo
Este timeline destaca por una transiciĆ³n bien llevada a cabo con una animaciĆ³n horizontal. De gran colorido y un diseƱo exquisito para resaltar cada uno de los intervalos de tiempo. EstĆ” en HTML, CSS y JavaScript para presentar una serie de tarjetas sobrepuestas sobre una imagen de fondo representativa.
Timeline horizontal CSS y HTML
Hecho por el conocido Envato Tuts+, se nos presenta una lĆnea de tiempo horizontal con una serie de tarjetas limpias y bĆ”sicas en el diseƱo. Colores planos y una lĆnea horizontal con una serie de puntos rojos que enclavan cada intervalo.
Timeline CSS, HTML y slick.jsĀ
Tonos pastel en el diseƱo para un timeline que destaca por la presentaciĆ³n de cada una de las imĆ”genes que muestran cada intervalo de tiempo. Es la transiciĆ³n entre cada una de las imĆ”genes e intervalos lo que hace destacar a esta lĆnea de tiempo.
Timeline secuencia V1
Un timeline que destaca por los botones en cada lĆnea vertical de cada intervalo para vincular una imagen de fondo a pantalla completa cada vez que pulsemos en uno.
Timeline horizontal HTML CSS
No podrĆ”s hacer clic en ningĆŗn lado en esta lĆnea de tiempo que destaca por un diseƱo exquisito por la sabia elecciĆ³n de la paleta de colores y una serie de bocadillos para cada uno de los timeline. No hay animaciones, pero visualmente es muy agradable a la vista.
Timeline Codyhouse
Este timeline presentado por Codyhouse es monocolor en el diseƱo y estĆ” desarrollado en HTML, CSS y JavaScript. Presenta una lĆnea minimalista con una serie de puntos como intervalos para ser pulsados y provocar la animaciĆ³n horizontal de menos de medio segundo. Simple, pero de gran efecto.
Timeline horizontal
Otra lĆnea de tiempo realizada en HTML, CSS y JavaScript. Caracterizada por el monocolor, encierra un elegante diseƱo con un color verde para poner la puntilla sobre cada uno de los puntos que representan los intervalos de tiempo. Cada vez que pulsemos uno se inicia una animaciĆ³n en lateral bien suave.
Timeline sin nombre
La Ćŗnica lĆnea de tiempo en color negro de la lista en el fondo. Luego se vale de distintos colores para diferenciar cada aƱo y el texto a la vez que los lĆmites del mismo. Tiene una animaciĆ³n destacada para pasar entre cada uno de los textos.
LĆnea de tiempo
Esta lĆnea de tiempo pone el acento en el color verde para ser totalmente estĆ”tica.
Otra lĆnea de tiempo horizontal
Se puede colocar una imagen casi a pantalla completa para una lĆnea de tiempo que destaca por el uso del tono azul y el gris mĆ”s una serie de cĆrculos que representan cada aƱo.
No te pierdas otra serie de menĆŗs en CSS y HTML.