Hoy vamos a hablar de 8 librerías de javascript que podrían interesarte ya que te facilitan el trabajo o te ahorran muchas horas. En el día a día tenemos diferentes necesidades para nuestras webs y con ésto pretendo ayudarte a que sea más rápido tu trabajo.
-
Izimodal
Ésta librería de JavaScript nos permite crear modales sin perder mucho tiempo.
Tienes muchos tipos ya creados, desde formularios de registro y login hasta cualquier otro tipo que puedas usar normalmente, y de ésta manera no perdemos tiempo creándolo nosotros.
Para incluirlo en tu proyecto tienes los CDN en:
Un ejemplo del código para añadirlo es:
https://cdnjs.com/libraries/izimodal
<button data-izimodal-open="modal-id">Open</button>
<!-- Specifying the opening transition -->
<button data-izimodal-open="modal-id" data-izimodal-transitionin="fadeInDown">Open</button>
Web:
http://izimodal.marcelodolce.com/#modal-default
-
Anime.js
Con ésta librería tenemos podemos tener animaciones css ya personalizadas y sin necesidad de crearlas desde cero.Para usarla puedes descargarla desde su Github:
https://github.com/juliangarnier/anime
Un ejemplo de animación es:
var cssSelector = anime({
targets: '#cssSelector .el',
translateX: 250
});
<div id="cssSelector">
<div class="line">
<div class="square el"></div>
</div>
</div>
Toda la documentación disponible en:
http://animejs.com/documentation/
-
Date Dropper
Si un día necesitas incluir en tu página web un calendario donde el usuario puede introducir la fecha que desee, esta librería te lo pone muy fácil. Puedes crear calendarios de manera muy sencilla.
Empezar a usarla es muy sencillo, simplemente añades algo parecido a esto:
<input type="text" />
<!-- init dateDropper -->
<script>
$('input').dateDropper();
</script>
Web:
https://felicegattuso.com/projects/datedropper/
-
Drop.jS
Este script ahorra tener que crear dropdowns al hacer clic sobre un elemento, lo hace por tí. Dispone de múltiples plantillas como tarjetas, sliders, modals, hovers, etc.En su Github puedes descargarla:
https://github.com/HubSpot/drop
Tenemos un sencillo ejemplo con el código siguiente:
<link rel="stylesheet" href="drop-theme-arrows.css" />
<script src="tether.min.js"></script>
<script src="drop.min.js"></script>
Toda la documentación la podéis encontrar:
https://github.hubspot.com/drop/docs/welcome/
-
ChartJS
Es una librería para representar datos mediante gráficos y tablas.
Ésta herramienta nos permite crear muy fácilmente las gráficas y sin tener que gastar mucho tiempo, ya que tenemos toda la documentación en su web.
<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
Web:
-
ParticleJS
Tenemos una librería de JS que nos permite crear unos efectos muy vistosos con partículas.
Tenemos el enlace en github para poder descargar el código:
https://github.com/VincentGarreau/particles.js/
Un ejemplo sencillo y visual lo tenemos en el Pen:
http://codepen.io/VincentGarreau/pen/pnlso
Web:
https://vincentgarreau.com/particles.js/
-
AniJS
Sin duda es la biblioteca más original de todas por su forma de implementación. Si cojeas en JavaScript, puede ser un buen apoyo a la hora de crear tus primeras animaciones combinadas de varios elementos a la vez. También te permite crear elementos de interfaz animados.
Un sencillo ejemplo:
<div data-anijs="if: click, do: flipInY, to: .container-box"></div>
Tenéis toda la documentación en:
-
HoverCSS
Una práctica y sencilla colección de efectos "Hover" de CSS3 listos para ser aplicados a enlaces, botones, logos, SVGs, imágenes y lo que se te ocurra. Muy fácil de aplicar a tus propios elementos, modificarlos o para usar simplemente como inspiración para tus propios efectos. Está disponible para ser usado tanto con CSS como con SASS y LESS.
Toda la documentación está en:
https://github.com/IanLunn/Hover/blob/master/README.md#hovercss
Web:
http://ianlunn.github.io/Hover/