Pure CSS Slideshow With Ken Burns Effect

Category: CSS & CSS3 , Slideshow | December 17, 2017
Author: Ana Travas
Views Total: 5,833 views
Official Page: Go to website
Last Update: December 17, 2017
License: MIT

Preview:

Pure CSS Slideshow With Ken Burns Effect

Description:

This is a CSS/CSS3 only slideshow which transitions between images (and any other web content) with ken burns, slide, fade and focus effects.

How to use it:

Create the html for the slideshow.

<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>

The basic CSS styles for the slideshow.

.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;
}

Add your own background images to the slides.

.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;
}

Add animations to the titles.

.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;
}

Create the CSS3 powered animations.

/**
 * ----------------------------------------
 * 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);
}
}

You Might Be Interested In:


3 thoughts on “Pure CSS Slideshow With Ken Burns Effect

  1. David

    Hi Ana,
    Your CSS code for the Ken Burns effect looks like it would meet my needs but I’m struggling to get it to work on a simple ASP.NET Web Form. I’ve copied all your CSS code into a new stylesheet (which is stored in the same folder as my other stylesheets) and the only changes I have made are to the image paths, such as the following example. The quoted image is indeed located in the Assets folder, which is in the root of my website.

    background-image: url(“/Assets/SS Moxom – pond mature.jpg”);

    I am viewing the page in test mode from Visual Studio, so it is running under a local server on my Windows PC. All that is displayed are the five image titles. None of the images appear.

    Have you any idea what I may be doing wrong?

    Reply
  2. David

    Shortly after making my post, I realised that the dedicated stylesheet containing your CSS code was not being referenced. That issue is now fixed but I still can’t get my images to display. I no longer see a list of the five image titles. I just get a plain black page.

    Reply
    1. David

      As an experiment, I changed my image URLs to reference the same images on my live website rather than on my PC’s hard disk. Doing a Ctrl-click on each link in the stylesheet successfully opens the required images. I am also now using a simple html page rather than an .aspx page, but the Ken Burns coding still just gives me a black page.

      To make certain that local hosting was not the cause of my problems, I then uploaded this html page and the stylesheet to my live site. It still failed in the same way.

      Reply

Leave a Reply