Vanilla JS

Vanilla JS: foreach

A continuación como recorrer un array usando el método forEach() de vanilla javascript. Vamos a ver 2 ejemplos diferentes, uno usando unos elementos del dom, y otro con un array en una variable. Ejemplo 1. Vamos a recorrer todos los […]

Leer más...

Para detectar y obtener la posición del scroll vertical («y») en pixeles en vanilla js es muy sencillo. Básicamente necesitamos usar el evento onscroll para detectar el movimiento del scroll y scrollY para obtener el valor en pixeles del desplazamiento […]

Leer más...

Para obtener el ancho o alto de la «ventana» actual en javascript, basta con usar el objeto window con la propiedad innerWidth para el ancho, y innerHeight para el alto: var ancho = window.innerWidth; var alto = window.innerHeight;

Leer más...

Simple código vanilla js para detectar si estamos scrolleando hacia arriba o hacia abajo usando el método addEventListener para detectar el scroll y getBoundingClientRect para conocer la posición. var scrollPos = 0; window.addEventListener('scroll', function(){ if ((document.body.getBoundingClientRect()).top > scrollPos) // ARRIBA […]

Leer más...

A continuación 5 formas diferentes de recorrer y interactuar con arrays en vanilla javascript: 1. Usando FOR: var ciudades = [ "León", "Zamora", "Salamanca" ]; for(var i = 0; i < ciudades.length; i++){ console.log(ciudades[i]); }; // "León", // "Zamora", // […]

Leer más...

Vanilla JS: FadeIn()

Simular el efecto FadeIn de jQuery usando solo Vanilla JS. La siguiente función fadeIn() consta de 2 parámetros: elemento y duración (este ultimo opcional). function fadeIn(element, duration = 600) { element.style.display = ''; element.style.opacity = 0; var last = +new […]

Leer más...

Uno de los efectos que más use de jQuery fue la función de slideToggle(). A continuación he creado ese efecto de deslizamiento en Vanilla JS, re-utilizable para múltiples elementos en la misma página. He utilizado la clase «js-toggle» para asignar […]

Leer más...

Código javascript vanilla del método scroll() de jQuery para detectar el scroll sobre un determinado elemento. En el siguiente ejemplo vamos a detectar el movimiento del scroll sobre toda ventana del navegador. En jQuery veníamos usando: $(window).scroll(function(){ console.log('Estas scrolleando'); }); […]

Leer más...

Si buscas en como vanillear en javascript el método scrollTop() de jQuery para obtener la posición actual (eje Y) de la barra de desplazamiento vertical: En jQuery veníamos usando: var scrollTop = $(window).scrollTop(); Y en Vanilla JS sería: var scrollTop […]

Leer más...