Códigos javascript para páginas web

Colección de códigos javascript para páginas web.

Trabajando con números con Javascript

Numeral.js es una librería en javascript para formatear y manipular números.

Trabaja con números, monedas, bytes, porcentajes, tiempo, … Se pueden realizar operaciones de sumas, restas, multiplicaciones y divisiones. Si tienes pensado manejar números con javascript te recomiendo mirar antes esta librería.

Link | Numeral.js librería en javascript para manejar números.

Anima sombras con Javascript

Hay efectos que consiguen enganchar al usuario por su originalidad. En el artículo de hoy podrás ver como animar sombras con Javascript.

Shine.js es una librería que con solo cambiar unas líneas de código podrás modificar la dimensión, expansión e inclinación de la sombra, así como los colores del texto, del fondo y de la propia sombra.

¿Cómo lo inserto en mi web?

En el head tienes que incluir el script:

<script src="path/to/shine.min.js"></script>

e inicializarlo:

var shine = new Shine(document.getElementById('my-shine-object'));

Además puedes configurar más opciones como la posición de la luz o personalizar las sombras.

Este javascript trabaja en todos los navegadores que soporten textShadow o boxShadow.

Calcular el tiempo entre dos fechas con javascript

Countdown.js es una API de Javascript para calcular el tiempo entre dos fechas que establezcamos.

En la web del autor se puede ver una demo y descargar los archivos para implementarlo en nuestra web.

Javascript para crear alertas en el navegador con estilos

Si eres de los que te gusta insertar avisos en tu página web y que se vean, aquí tienes este plugin en javascript que te permitirá crear alertas en el navegador con estilos.

Con javascript es muy fácil crear alertas, solo tienes que introducir el siguiente código:

<script type="text/javascript">
  alert("Hola Mundo!");
</script>

Utilizando el plugin SweetAlert de javascript podrás conseguir un efecto mucho más logrado, algo así como:

Visualmente es mucho más atractivo y cambia bastante el diseño. Puedes personalizar las imágenes que se ven en la alerta y conseguir tu objetivo, que tus visitantes se queden con el aviso.

En la página web de autor te puedes descargar los archivos de forma gratuita, como inconveniente comentarte que tienes que compartir en Facebook o Twitter para poder descargarlos.

Link | SweetAlert Plugin Javascript

Modernizr, javascript para compatibilidad html5 y css3

Modernizr es una librería javascript en código abierto para hacernos la vida más fácil a los diseñadores web, mientras no hay una completa integración de HTML5 y CSS3 con los navegadores web.

No pensemos que si integramos Modernizr en nuestra web ya es compatible con todas las versiones de los navegadores, eso es falso. Simplemente nos indica si el navegador donde se ve la web es compatible con HTML5 y CSS3, por lo que si no es compatible podemos habilitar un código alternativo, por ejemplo con jQuery.

Visitar web Modernizr

Como complemento a Modernizr se suele utilizar Polyfills. Es un plugin que permite añadir funcionalidades a los navegadores antiguos, pero ojo, se debe de utilizar con cuidado pues puede bajar el rendimiento del navegador. Si quieres más información de todo esto, no dudes en consultar la página de Modernizr, indicada en el párrafo anterior; pues ahí encontrarás documentación y la última versión de la librería Modernizr.

Guardar

Guardar

Deja un comentario

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

Scroll al inicio