Presentación CSS/CSS3 pura con imagen panorámica y zoom efecto

Vista prévia

Descripción

Una presentación de fondo HTML/CSS pura que utiliza animaciones CSS3 para crear el efecto Ken Burns (panorámica y zoom de la imagen) durante las transiciones de imagen.

Funcionamiento

Compile la estructura HTML para la proyección de diapositivas en segundo plano utilizando figure TAG.

<div class="pic-wrapper">

<figure class="pic-1"></figure>

<figure class="pic-2"></figure>

<figure class="pic-3"></figure>

<figure class="pic-4"></figure>
</div>

Estilo de la presentación de diapositivas y hacerla a pantalla completa.

* {

margin: 0;

padding: 0;
}

.pic-wrapper {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;
}

figure {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

/*animation*/



animation: slideShow 24s linear infinite 0s;

-o-animation: slideShow 24s linear infinite 0s;

-moz-animation: slideShow 24s linear infinite 0s;

-webkit-animation: slideShow 24s linear infinite 0s;
}

Añade imágenes de fondo a la presentación.

.pic-1 {

opacity: 1;

background: url(1.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;
}

.pic-2 {

animation-delay: 6s;

-o-animation-delay: 6s;

-moz--animation-delay: 6s;

-webkit-animation-delay: 6s;

background: url(2.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;
}

.pic-3 {

animation-delay: 12s;

-o-animation-delay: 12s;

-moz--animation-delay: 12s;

-webkit-animation-delay: 12s;

background: url(3.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;
}

.pic-4 {

animation-delay: 18s;

-o-animation-delay: 18s;

-moz--animation-delay: 18s;

-webkit-animation-delay: 18s;

background: url(4.jpg) no-repeat center center;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;
}

Cree el efecto Ken Burns usando fotogramas clave.

@keyframes
 slideShow {
0% {
 opacity: 0;
 transform:scale(1);
 -ms-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 transform:scale(1.1);
 -ms-transform:scale(1.1);
}
 100% {
 opacity: 0;
 transform:scale(1);
 -ms-transformm:scale(1);
}
}

@-o-keyframes
 slideShow {
0% {
 opacity: 0;
 -o-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -o-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -o-transformm:scale(1);
}
}

@-moz-keyframes
 slideShow {
0% {
 opacity: 0;
 -moz-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -moz-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -moz-transformm:scale(1);
}
}

@-webkit-keyframes
 slideShow {
0% {
 opacity: 0;
 -webkit-transform:scale(1);
}
 5% {
 opacity: 1
}
 25% {
 opacity: 1;
}
 30% {
 opacity: 0;
 -webkit-transform:scale(1.1);
}
 100% {
 opacity: 0;
 -webkit-transformm:scale(1);
}
}