Pure CSS Slideshow With Ken Burns Effect

Author
In CSS Tutorial, Slideshow Dec 23, 2017
CSS-Gallery

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

The post Pure CSS Slideshow With Ken Burns Effect appeared first on CSS Script.

 

Leave a Reply

Your email address will not be published. Required fields are marked *