Presentación mínima con escala & transiciones de fundido
| Autor: | minhanPark |
|---|---|
| Views Total: | 772 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 6, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Una proyección de diapositivas/carrusel automática que cambia automáticamente entre diapositivas con una escala de CSS3 y animaciones de fundido.
Funcionamiento
Crea diapositivas para la presentación/carrusel.
<div> <div class="slide"> <h1>Vanilla</h1> </div> <div class="slide"> <h1>Carousel</h1> </div> <div class="slide"> <h1>Slider</h1> </div> </div>
El CSS necesario para las diapositivas.
.slide {
width: 100%;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
transform: scale(0.9);
opacity: 0.8;
transition: all 0.5s ease-in-out;
}
.showing {
z-index: 1;
transform: none;
opacity: 1;
} Las funciones principales de la presentación/carrusel.
const first = document.querySelector('.slide');
const slide = () => {
const before = document.querySelector('.showing');
if (before) {
before
.classList
.remove('showing');
const next = before.nextElementSibling;
if (next) {
next
.classList
.add('showing')
} else {
first
.classList
.add('showing');
}
} else {
first
.classList
.add('showing');
}
}
slide(); Establezca el intervalo entre diapositivas.
setInterval(slide, 1500);
