Cómo crear una página como una presentación de power point
Powerpoint ha sido y probablemente siempre será una herramienta insustituible en el conjunto de herramientas de muchas personas. ¿Por qué? Porque permite a las personas organizar gráficos y texto de forma ordenada en un gran lienzo. Esto es especialmente bueno para resumir conceptos difíciles mientras un presentador los analiza. Afortunadamente, la web ha evolucionado tanto que no debes temer el día en que Powerpoint se pierda en el tiempo, porque puedes crear uno usando solo HTML, CSS y Javascript.
Empezando
Este tutorial utilizará principalmente las teclas de flecha izquierda y derecha para moverse entre las secciones, pero el código se puede cambiar fácilmente para hacer uso adecuado de las teclas de flecha arriba y abajo.
Primero, tenemos que escribir algo de marcado, cada sección contendrá una clase activa u oculta de forma predeterminada. Hemos decidido hacer que la primera sección esté activa de forma predeterminada, al igual que PowerPoint, pero puede cambiar esto fácilmente intercambiando la clase con alguna otra sección.
El contenido de cada sección depende de usted, simplemente agregaremos un encabezado para ayudarnos a distinguir una sección de otras secciones.
<main>
<section class="active">
<h1>Hello there!</h1>
</section>
<section class="hidden">
<h1>Remember to wear a mask!</h1>
</section>
<section class="hidden">
<h1>Bye bye!</h1>
</section>
</main>
Lanzando algunos estilos
Con el marcado hecho, solo hay un paso más antes de que comencemos a capturar los eventos del teclado para hacerlo más parecido a PowerPoint. Para que cada sección ocupe toda la altura de la ventana gráfica (la parte visible de una página), estableceremos la propiedad min-height en 100vh. 100vh se traduce aproximadamente como “tomar tanto espacio como el lleno altura de la ventana de visualización”.
También usamos CSS3 Flexbox aquí para centrar el encabezado tanto verticalmente (alinear elementos) como horizontalmente (justificar contenido), esto es puramente estético y no un requisito para el efecto, por lo que depende de usted reemplazarlo con lo que desee. desear.
body {
font-family: sans-serif;
margin: 0;
}
section {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
section h1 {
font-size: 3.5rem;
text-align: center;
color: white;
}Si está interesado en hacer que las secciones tengan un color distinto sin tener que usar una clase para cada una, puede usar el selector nth-child. Aquí hacemos uso de los valores pares e impares para dar literalmente un color de fondo diferente para las secciones pares e impares. Si prefiere diseñarlos individualmente, eche un vistazo a la enésimo de tipo() selector.
section:nth-child(odd) {
background-color: crimson;
}
section:nth-child(even) {
background-color: black;
}Por último, necesitamos una clase para ocultar todas las secciones que actualmente no están “activas”. .hidden cuando se agrega sobrescribirá la visualización de la sección a la que se agregó none desde flex.
.hidden {
display: none;
}Dando vida a nuestro pseudo-Powerpoint a través de las teclas de flecha
Antes de trabajar en el efecto en sí, puede resultarle útil pensar en cada sección como un libro y en todas las secciones como una pila de libros.
En un momento dado, siempre hay al menos un libro en la pila, y cuando presiona la tecla correcta, debe ocultar ese libro apilando un libro encima y si se ha quedado sin libros para apilar, entonces debe Coge todos los libros excepto el de abajo.
La única diferencia cuando presionas la tecla izquierda es que quitas un libro cada vez y si has llegado al libro de abajo debes volver a colocar todos los demás libros.
De esta manera, crea más o menos un círculo y nunca se queda sin libros en la pila. calculeNextIndex es la función que nos dice cual es el próximo libro. Toma 2 argumentos reverse que indica cuál nos da una indicación de cuál de las dos claves se está utilizando y, por lo tanto, qué libro viene a continuación, y activeIndex que nos dice la posición del libro superior en la pila.
const calculateNextIndex = (reverse, activeIndex) => {
const sectionsLastIndex = sections.length - 1;
if (reverse) {
const nextIndex = activeIndex - 1 < 0 ? sectionsLastIndex : activeIndex - 1;
return nextIndex;
}
const nextIndex = activeIndex + 1 > sectionsLastIndex ? 0 : activeIndex + 1;
return nextIndex;
};A continuación, tenemos que ocultar y activar las secciones de manera adecuada, eliminando .active de la sección que lo tiene y ocultándolo agregando .hidden y haciendo lo contrario para la sección que debe activarse. traverseSections mueve el libro que debe moverse a continuación.
const traverseSections = (reverse = false) => {
const currentlyActive = document.querySelector('.active');
sections.forEach((section, index) => {
if (section === currentlyActive) {
const nextIndex = calculateNextIndex(reverse, index);
const nextActive = sections[nextIndex];
currentlyActive.classList.remove('active');
currentlyActive.classList.add('hidden');
nextActive.classList.remove('hidden');
nextActive.classList.add('active');
return;
}
return;
});
};Finalmente, tenemos que capturar los eventos del teclado y realizar la operación correcta. El evento keydown activa un objeto de evento que contiene la propiedad keyCode. Esta propiedad es la que nos ayudará a identificar qué tecla se ha pulsado. Verificar este enlace para echar un vistazo a otros códigos clave.
const sections = document.querySelectorAll('section');
document.addEventListener('keydown', (evt) => {
if (evt.isComposing || evt.keyCode === 229) {
return;
} else if (evt.keyCode === 39) {
traverseSections();
} else if (evt.keyCode === 37) {
traverseSections(true);
}
});Ahora, abra PowerPoint y vea si lo que creamos se parece. Si no lo tiene instalado, no se preocupe, eche un vistazo a este codepen en su lugar:
¿Qué puedes hacer a continuación? Intente incluir algunas transiciones y hágalo de modo que la velocidad de las transiciones se pueda personalizar a través de una interfaz. Entonces, probablemente también convierta su objetivo de por vida en recrear PowerPoint en la web. Quiero decir, alguien ya está en eso.
Ahora, si realmente lo toma en serio o disfruta de efectos como este, puede echar un vistazo a fullPage.js. Proporciona mucho más de lo que hemos descrito aquí, como agregar animaciones suaves al cambiar entre secciones, compatibilidad entre navegadores y documentación bien escrita sobre todo tipo de formas en que puede personalizar la experiencia. Se puede integrar fácilmente con un sitio web de WordPress o un sitio web escrito con un marco de front-end como React o Vue.
