Timeline responsive touch events con css3 y jquery

Simple timeline responsive para ordenador y dispositivos móviles con soporte touch y mouse events con css3 y jquery.
2017
2016
2015
2014
2013
2012

Empezar

Descargar la librería y descomprimir el archivo zip. Dentro encontarás un html del ejemplo. Tres imágenes para el demo, un archivo css y js

Crear el objecto Timeline e inicializar

$(document).ready(function(){
      var timeline = new TimeLine();
      timeline.init('#timeline', {itemColor: false, defaultValue: '2016', globalBackTextImageDark : 0.25, itemMargin: 20, touchEvents: false, showNavigation: false});
}); 

Parámetros de inicialización

  • selector: id del selector del div
  • parametros en json:
    • itemColor: si has creado un color de fondo y texto en los datas de los divs estos colores puedes mostrarlos también en los items del timeline. El valor puede ser true o false
    • defaultValue: indica un string con el valor del item que se visualizará al iniciar
    • globalBackTextImageDark: indicar un número decimal entre el 0 y 1 que corresponde al canal alpha de rgba
    • itemMargin: espacio entre los distintos items
    • touchEvents: activa los eventos de ratón y deslizar con el dedo
    • showNavigation: activa las flechas para cambiar de item

Html

Ejemplo del html básico para crear el contenedor del timeline y un item

<div class="timeline-container noselect" id="timeline">
    <div class="timeline-item" data-bgcolor="#fafbff" data-textcolor="#333" data-descr="Descripción" data-image="imagen1.jpg" data-image-textcolor="#fff" data-image-backtextcolor="rgba(0,0,0,0.5)" data-image-align="text-center" data-image-descr="Descripción">2017</div>
</div>

Recuerda ponerle al contenedor principal el mismo id al cual llamarás a la función javascript.

Dentro de cada item tienes que indicar una serie de valores por medio de los datas. A continuación el listado completo de posibles valores

  • data-bgcolor: indicar un color para la capa del fondo del texto (bloque de la derecha).
  • data-textcolor: color para el texto del bloque de la derecha
  • data-descr: texto que quieres que aparezca en el bloque de la derecha (puedes utilizar etiquetas html aunque solo afectará el cambio de color para h1, h2, h3 y pre). Si no introduces ningún valor o lo dejas en blanco el timeline utilizará la imagen a cubrir todo el ancho del contenedor.
  • data-image: url de la imagen que se visualizará en el bloque de la izquierda
  • data-image-textcolor: color para el texto que se visualiza en el bloque de la imagen
  • data-image-backtextcolor: color para el fondo del texto de la imagen. Debes utilizar rgba con un valor para el canal alfa sino el color tapará la imagen
  • data-image-align: alinear el contenido a la izquierda, centro o derecha. (valores posibles: text-left, text-center, text-right)
  • data-image-descr: texto que se mostrará por encima de la imagen. Puedes pegar el código de un video de youtube.

Comentar

Para poder realizar comentarios. Primero debes inicar sesión o crear una cuenta.