en Laboratorio |

Animaciones

Para aquellos proyectos simplísimos en los que nos apetece añadir una transición entre pantallas para contar una idea os dejo una versión inicial de mi método.

Aquí una demo.

Un simple archivo HTML con el contenido de las pantallas:

<!DOCTYPE html>
<html lang="es">
 <head>
  <meta charset="utf-8" />
  <title>Animaciones</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="animaciones.css" />
 </head>
 <body>
  <div class="panta" id="panta1"><h1>Contenido de la pantalla 1</h1></div>
  <div class="panta" id="panta2"><h1>Contenido de la pantalla 2</h1></div>
  <div class="panta" id="panta3"><h1>Contenido de la pantalla 3</h1></div>
  <div class="panta" id="panta4"><h1>Contenido de la pantalla 4</h1></div>
  <button type="button" class="botoni" id="anterior" onclick="mostrar('anterior', 'slide_left');">Anterior</button>
  <button type="button" class="botoni" id="siguiente" onclick="mostrar('siguiente', 'slide_right');">Siguiente</button>
  <script src="animaciones.js"></script>
 </body>
</html>

Un archivo aparte con el CSS básico (las animaciones y unos ajustes comunes):

/***** Animaciones *****/

@keyframes fade_in {
 0% {opacity: 0;}
 100% {opacity: 1;}
}

@keyframes slide_left {
 0% {left: -100%;}
 100% {left: 0;}
}

@keyframes slide_right {
 0% {left: 100%;}
 100% {left: 0;}
}

/***** Animaciones Webkit *****/

@-webkit-keyframes fade_in {
 0% {opacity: 0;}
 100% {opacity: 1;}
}
@-webkit-keyframes slide_left {
 0% {left: -100%;}
 100% {left: 0;}
}

@-webkit-keyframes slide_right {
 0% {left: 100%;}
 100% {left: 0;}
}

/***** Comunes *****/

body {
 overflow: hidden;
}

.panta {
 position: absolute;
 width: 100%;
 left: 0;
 top: 0;
 bottom: 10%;
 background-color: white;
 animation-duration: 1s;
-webkit-animation-duration: 1s;
}

.botoni {
 position: absolute;
 top: 90%;
 bottom: 0;
 width: 50%;
}

#anterior {
 left: 0;
 right: 50%;
}

#siguiente {
 left: 50%;
 right: 0;
}

/***** Pantallas *****/

#panta1 {
 background-color: pink;
}

#panta2 {
 background-color: green;
}

#panta3 {
 background-color: yellow;
}

#panta4 {
 background-color: orange;
}

Y otro archivo aparte con el programa en «Pure Vanilla Javascript».

var min_panta = 1;
var max_panta = document.querySelectorAll('.panta').length;

var num_panta = 1; // Inicializar num_panta
var z = 99; // zIndex inicial

var animaciond = 'fade_in'; // Animación por defecto

mostrar(num_panta);

function mostrar(panta, animacion) {
 if(panta == 'anterior') num_panta = num_panta - 1;
 if(panta == 'siguiente') num_panta = num_panta + 1;
 if(num_panta <= min_panta) {
  num_panta = min_panta;
  anterior.disabled = true;
  anterior.style.cursor = 'not-allowed';
 } else if(num_panta >= max_panta) {
  num_panta = max_panta;
  siguiente.disabled = true;
  siguiente.style.cursor = 'not-allowed'; 
 } else {
  anterior.disabled = false;
  siguiente.disabled = false;
  anterior.style.cursor = 'pointer';
  siguiente.style.cursor = 'pointer';
 }
 if(!animacion) animacion = animaciond;
 pantalla = document.getElementById('panta' + num_panta);
 pantalla.style.zIndex = ++ z;
 pantalla.style.animationName = animacion;
 pantalla.style.webkitAnimationName = animacion;
 pantalla.style.animationName = '';
 pantalla.style.webkitAnimationName = '';
 setTimeout(function () {
  pantalla.style.animationName = animacion;
  pantalla.style.webkitAnimationName = animacion;
 }, 0);
}

A lo mejor luego sigo trabajando en esto. De cualquier manera sé que sabrás sacarle partido.