Acceder al contenido principal

Blog

Volver a Blog

8 Librerías de JavaScript que pueden interesarte

23 Nov 018
imageheader
avatar_eduardo_valencia

Javascript

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

 

izi

 

É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

animejs

 


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

 

datedropper


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

dropjs

 

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

 

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:

https://www.chartjs.org/

 

  • ParticleJS

 

part

 

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

 

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:

https://anijs.github.io/

 

  • HoverCSS

 

hover

 

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/
 

 

Comentarios

Añadir nuevo comentario