Línea de tiempo interactiva adaptable en Vanilla JavaScript-línea de tiempo simple
| Autor: | CheshireBeane |
|---|---|
| Views Total: | 816 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 27, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una línea de tiempo interactiva, sencilla y receptiva implementada en JavaScript puro.
En el escritorio, desplace la línea de tiempo para desplazarse entre los nodos. Haga clic en el nodo para mostrar los detalles sobre el evento.
En el dispositivo móvil, se colapsará en una línea de tiempo vertical donde los detalles del evento siempre estarán visibles en la pantalla.
Funcionamiento
Inserte el JavaScript y la hoja de estilo de la línea de tiempo simple en el archivo HTML.
<link rel="stylesheet" href="simpletimeline.css"> <script src="simpletimeline-min.js"></script>
Cree un contenedor en el que desee mantener la línea de tiempo.
<div id="timeline"></div>
Defina sus propios datos de evento para la línea de tiempo.
const DATA = [
{
year: '2004',
title: 'This is a test title',
image: 'https://picsum.photos/600/400'
},
{
year: '2005',
title: 'This is a test title 2',
image: 'https://picsum.photos/600/400'
},
{
year: '1990',
title: 'This is a test title 3',
image: 'https://picsum.photos/600/400'
},
{
year: '2018',
title: 'This is a test title 4',
image: 'https://picsum.photos/600/400'
},
{
year: '2005',
title: 'This is a test title 2',
image: 'https://picsum.photos/600/400'
},
{
year: '1990',
title: 'This is a test title 3',
image: 'https://picsum.photos/600/400'
},
{
year: '2018',
title: 'This is a test title 4',
image: 'https://picsum.photos/600/400'
},
{
year: '2018',
title: 'This is a test title 4',
image: 'https://picsum.photos/600/400'
},
{
year: '2005',
title: 'This is a test title 2',
image: 'https://picsum.photos/600/400'
},
{
year: '1990',
title: 'This is a test title 3',
image: 'https://picsum.photos/600/400'
},
{
year: '2018',
title: 'This is a test title 4',
image: 'https://picsum.photos/600/400'
},
]; Renderizar una línea de tiempo en la página.
if(document.getElementById('timeline')) {
let timeline = new Timeline('timeline', DATA);
timeline.init();
}
