Presentación CSS pura con efecto Ken Burns

Vista prévia

Descripción

Esta es una presentación de diapositivas CSS/CSS3 que cambia entre imágenes (y cualquier otro contenido web) con Ken Burns, Slide, fade y efectos de enfoque.

Funcionamiento

Cree el HTML para la proyección de diapositivas.

<div class="main-container">

<div class="img img-1"></div>

<div class="img img-2"></div>

<div class="img img-3"></div>

<div class="img img-4"></div>

<div class="img img-5"></div>

<div class="title title-1">Slide 1</div>

<div class="title title-2">Slide 2</div>

<div class="title title-3">Slide 3</div>

<div class="title title-4">Slide 4</div>

<div class="title title-5">Slide 5</div>
</div>

Los estilos CSS básicos para la proyección de diapositivas.

.main-container {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: black;

overflow: hidden;

z-index: 1;

perspective: 400px;

transition: opacity .3s;
}

.img {

position: absolute;

overflow: hidden;

left: 0;

top: 0;

right: 0;

bottom: 0;

background-color: transparent;

background-position: center center;

background-repeat: no-repeat;

background-size: cover;

opacity: 0;
}

.title {

display: block;

position: absolute;

width: 200%;

top: 50%;

left: -50%;

transform: translateY(-50%);

font-size: 6em;

text-align: center;

color: #FFF;

font-weight: 700;

letter-spacing: .07em;

text-transform: uppercase;

opacity: 0;

z-index: 5;
}

Añade tus propias imágenes de fondo a las diapositivas.

.main-container.loaded .img-1 {

background-image: url(1.jpg);

animation: kenburns-top 6s linear both reverse 0.5s, fade-out 2s ease-in forwards 5.5s;

z-index: 5;
}

.main-container.loaded .img-2 {

background-image: url(2.jpg);

animation: kenburns-bottom 6s linear both 5.5s, fade-out 2s ease-in forwards 10.5s;

z-index: 4;
}

.main-container.loaded .img-3 {

background-image: url(3.jpg);

animation: kenburns-right 6s linear both reverse 10.5s, fade-out 2s ease-in forwards 15.5s;

z-index: 3;
}

.main-container.loaded .img-4 {

background-image: url(4.jpg);

animation: kenburns-left 6s linear both 15.5s, fade-out 2s ease-in forwards 20.5s;

z-index: 2;
}

.main-container.loaded .img-5 {

background-image: url(5.jpg);

animation: kenburns-right 7s linear both reverse 20.5s, fade-out 3s ease-in forwards 24.5s;

z-index: 1;
}

Añade animaciones a los títulos.

.main-container.loaded .title-1 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 1.8s, text-blur-out 1.2s ease-in forwards 5.5s; }

.main-container.loaded .title-2 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 6.8s, text-blur-out 1.2s ease-in forwards 10.5s; }

.main-container.loaded .title-3 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 11.8s, text-blur-out 1.2s ease-in forwards 15.5s; }

.main-container.loaded .title-4 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 16.8s, text-blur-out 1.2s ease-in forwards 20.5s; }

.main-container.loaded .title-5 { animation: focus-in-contract 1.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 21.8s, text-blur-out 1.6s ease-in forwards 25.5s; }

.main-container.loaded .info-container {

opacity: 0;

animation: slide-in-bottom 12s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards 26.5s;
}

Crea las animaciones con tecnología CSS3.

/**
 * ----------------------------------------
 * animation kenburns-top
 * ----------------------------------------
 */
@keyframes
 kenburns-top {
0% {
 transform: scale(1) translateY(0);
 transform-origin: 50% 16%;
}
 100% {
 transform: scale(1.25) translateY(-15px);
 transform-origin: top;
}
}
/**
 * ----------------------------------------
 * animation kenburns-bottom
 * ----------------------------------------
 */
@keyframes
 kenburns-bottom {
0% {
 transform: scale(1) translateY(0);
 transform-origin: 50% 84%;
}
 100% {
 transform: scale(1.25) translateY(15px);
 transform-origin: bottom;
}
}
/**
 * ----------------------------------------
 * animation kenburns-right
 * ----------------------------------------
 */
@keyframes
 kenburns-right {
0% {
 transform: scale(1) translate(0, 0);
 transform-origin: 84% 50%;
}
 100% {
 transform: scale(1.25) translateX(20px);
 transform-origin: right;
}
}
/**
 * ----------------------------------------
 * animation kenburns-left
 * ----------------------------------------
 */
@keyframes
 kenburns-left {
0% {
 transform: scale(1) translate(0, 0);
 transform-origin: 16% 50%;
}
 100% {
 transform: scale(1.25) translate(-20px, 15px);
 transform-origin: left;
}
}
/**
 * ----------------------------------------
 * animation focus-in-contract
 * ----------------------------------------
 */
@keyframes
 focus-in-contract {
0% {
 letter-spacing: 1em;
 filter: blur(12px);
 opacity: 0;
}
 100% {
 filter: blur(0px);
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation tracking-in-contract
 * ----------------------------------------
 */
@keyframes
 tracking-in-contract {
0% {
 letter-spacing: 1em;
 opacity: 0;
}
 40% {
 opacity: 0.6;
}
 100% {
 letter-spacing: normal;
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation fade-out
 * ----------------------------------------
 */
@keyframes
 fade-out {
0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@keyframes
 fade-in {
0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation text-blur-out
 * ----------------------------------------
 */
@keyframes
 text-blur-out {
0% {
 filter: blur(0.01);
}
 100% {
 filter: blur(12px) opacity(0%);
}
}
/**
 * ----------------------------------------
 * animation slide-in-bottom
 * ----------------------------------------
 */
@keyframes
 slide-in-bottom {
0% {
 transform: translateY(100%);
 opacity: 0;
}
 100% {
 transform: translateY(0);
 opacity: 1;
}
}
/**
 * ----------------------------------------
 * animation rotate-center
 * ----------------------------------------
 */
@keyframes
 rotate-center {
0% {
 transform: rotate(0);
}
 100% {
 transform: rotate(360deg);
}
}