Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

FlipClock.js. Librería para crear reloj con efecto moneda


  Publicado hace |  Etiquetas: , , , ,

¿Necesitas un reloj en tu web o tienes uno pero no funciona y se ve horrible? Con FlipClock.js podrás mostrar un reloj con efecto de moneda, muy fácil de codificar e implementar.

FlipClock.js

FlipClock

FlipClock.js. Librería para crear reloj con efecto moneda.

FlipClock.js es una librería que proporciona soluciones abstractas ofreciéndonos un profundo nivel de personalización sin reescribir el código. Muchas de las librerías existentes para un contador tienen una enorme cascada de condicionales, o se tiene que codificar demasiado.

Problemáticas como las anteriores dieron pie a muchas soluciones, después de revisar una por una el equipo de FlipClock.js determinó una API extensible y  adecuada para codificar cualquier tipo de reloj o contador con un efecto increíble de moneda.

Requisitos Lógicos

La siguiente lista muestra los requisitos lógicos que fueron considerados al crear la API:

  • Utilizar como un reloj, temporizador y como una cuenta atrás.
  • Aspecto configurable usando CSS puro.
  • Sintaxis Clean & Dry
  • Abstracción de todo en objetos reutilizables
  • API para desarrolladores con todas las funciones para crear “Caras del reloj” personalizados.

¿Qué necesito?

Ejemplo básico

Cargando Scripts. FlipClock.js requiere algunos archivos para que funcione correctamente. La fuente minified contiene todas las caras del reloj para una máxima portabilidad:

<code><html>
	<head>
		<link rel="stylesheet" href="/assets/css/flipclock.css">
	</head>
	<body>
		<div class="your-clock"></div>

		<script src="/assets/js/libs/jquery.js"></script>
		<script src="/assets/js/flipclock/libs/prefixfree.min.js"></script>
		<script src="/assets/js/flipclock/flipclock.min.js"></script>
	</body>
</html></code>

Instanciando. FlipClock.js requiere jQuery para la manipulación de DOM. Si funciona un plugin jQuery típico, pero en lugar de devolver un objeto jQuery, se devuelve un objeto FlipClock. Te mostramos 2 formas de instanciar, utiliza la que más te agrade:
Forma 1.

var clock = $('.your-clock').FlipClock({// ... opciones<br />});

Forma 2.

var clock = new FlipClock($('.your-clock'), {// ... opciones<br />});

Para más información sobre métodos y callbacks visita el sitio oficial, también encontrarás datos sobre las caras de reloj y la misma API para desarrollo.

Descargas

La descarga la puedes realizar desde el GitHub de FlipClock.js.

No olvides darnos tus comentarios y expresarnos como te fue con la librería y que te pareció.

comments powered by Disqus