29 timelines de gran diseño en CSS y con un poco de Javascript

Scroll timeline

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

Scroll timeline

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

CSS timeline propiedades

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

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

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

Timeline fixed

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

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

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

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

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

Timeline 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

Timeline 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

Timeline CSS

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

Timeline comentarios

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

Timeline responsive

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

Timeline

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

CSS Timeline

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

Timeline responsive 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

Nested

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

Responsive 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

Timeline 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

Horizontal envato

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 

Timeline pastel

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

Timeline secuencia

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

Timeline HR

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

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

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

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

Línea tiempo

Esta línea de tiempo pone el acento en el color verde para ser totalmente estática.

Otra línea de tiempo horizontal

Otra línea de tiempo

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.


Categorías

CSS, HTML

Manuel Ramírez

Ilustrador con estudios formados en ESDIP con la diplomatura de tres años de General de Dibujos, Animados y Animación. Apasionado de la... Ver perfil ›

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *