Animar HTML con Javascript y CSS

Hola a todos, en este post voy a estar compartiendo un pequeño codigo con el cual podran animar HTML con Javascript y CSS. A partir de aqui, nos vamos a concentrar solamente en el codigo de javascript y la parte del estilo CSS. El proposito es que al final tengan en sus manos una especie de libreria que podran usar continuamente en cualquier pagina que deseen crear.

El concepto sobre este codigo, o la necesidad que tenia cuando creaba mis paginas, era el de crear o simular paginas tales como las de google pixels. Asi que basicamente necesitaba javascript para detectar cuando parte de mi pagina se mostrara en pantalla, y animar el contenido haciendo la pagina un poco mas atractiva.

Si te gusta mas seguir un video, aqui te dejo el video sobre este tutorial

Comenzando el contenido Javascript

Lo primero es preparar nuestro codigo javascript, y lo haremos de esta manera:

(function(){
  
  
})();

Lo siguiente va a ser incluir las variables a usar en nuestro codigo:

var scroll = window.requestAnimationFrame || function(callback){window.setTimeout(callback, 1000/60)};
var scaleElements = document.querySelectorAll('.scale-on-scroll');

Las variables de arriba son explicadas de la siguiente manera:

«scroll» va a llamar window.requestAnimationFrame, el cual informa al navegador que quieres realizar una animación y solicita que el navegador programe el repintado de la ventana para el próximo ciclo de animación.
«scaleElements» registrara todos los elementos que contengan la clase «scale-on-scroll» para ser usados mas tarde.

Ahora crearemos las funciones a usar:

Primero, la funcion principal que da vida a las animaciones.

function animationShow(){


  scroll(animationShow);
}
animationShow();

Lo siguiente sera el contenido que pondremos dentro de esta funcion. Para hacerlo un poco mejor, vamos a crear una funcion externa que controlara la animacion. En general, crearemos un objeto que vamos reusar tanto como querramos. La funcion crea un prototipo de arreglo el cual vamos a asignar a un «forEach» loop y vamos a llamar tres variables, las cuales permiten el funcionamiento de la funcion.

function onlyOnScreen(classDomName, animationstyle, hiddenstyle){
  Array.prototype.forEach.call(classDomName, function (elm){
     if(isElmInVport(elm)){
        elm.classList.add(animationstyle);
        elm.classList.remove(hiddenstyle);
     } else{
        elm.classList.add(hiddenstyle);
        elm.classList.remove(animationstyle);
     }
  });
}

La funcion de arriba toma tres variables:

Primera variable de objeto (classDomName) sera usada para albergar la variable que declararemos al porincipio.
Segunda variable de objeto (animationstyle), sera usada para contener la clase de animacion que sera creada en el fichero de estilo.
Tercera variable de objeto (hiddenstyle), sera usada para contener la clase que se encarga de ocultar el contenido html.

Con estas tres variable creamos entoces un prototipo de arreglo que ejecuta un forEach loop, la cual toma la clase (classDomName) mas una funcion con una variable de elemento y la incluimos en una condicion. La condicion toma la funcion isElmInVport que presento abajo y en base a esta funcion agregaremos y removeremos estilos la cual llamaran a la segunda (animationstyle) y la tercera (hiddenstyle) variable.

La funcion que analiza viewport

function isElmInVport(el){

    if(typeof jQuery === "function" && el instanceof jQuery){el = el[0];}

    var rect = el.getBoundingClientRect();
    return (
            (rect.top <= 0 && rect.bottom >= 0) 
|| 
            (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) && 
            rect.top <= (window.innerHeight || document.documentElement.clientHeight)) 
|| 
            (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
            );
}

Por ultimo, vamos a incluir la funcion que ejecuta la animacion dentro de la funcion principal (animationShow()) y usaremos las variables para controlar el contenido.

onlyOnScreen(scaleElements, 'scale-on-scroll', 'hiddens');

Y sin mas, aqui esta el codigo completo ya montado.

(function(){
  

  var scroll = window.requestAnimationFrame || function(callback){window.setTimeout(callback, 1000/60)};
  var scaleElements = document.querySelectorAll('.scale-on-scroll');


  function animationShow(){



    onlyOnScreen(scaleElements, 'scale-up-element', 'hiddens');

    scroll(animationShow);
  }
  animationShow();

  

  function onlyOnScreen(classDomName, animationstyle, hiddenstyle){
    Array.prototype.forEach.call(classDomName, function (elm){
      if(isElmInVport(elm)){
         elm.classList.add(animationstyle);
         elm.classList.remove(hiddenstyle);
      } else{
         elm.classList.add(hiddenstyle);
         elm.classList.remove(animationstyle);
      }
    });
  }
 

  function isElmInVport(el){

    if(typeof jQuery === "function" && el instanceof jQuery){el = el[0];}

    var rect = el.getBoundingClientRect();
    return (
            (rect.top <= 0 && rect.bottom >= 0) 
|| 
            (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) && 
            rect.top <= (window.innerHeight || document.documentElement.clientHeight)) 
|| 
            (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
            );
  }
})();

Hasta aqui, la parte de javascript. En el siguiente post le presentare la animacion que crearemos en CSS la cual es llamada en nuestro script. Sin mas continua con el proximo post para crear el estilo y continuar con esta serie.

The Digital Mike