Using CSS background images as slide show with Ken Burns effect
In this tutorial, the Ken Burns effect, which is basically used with still images for panning and zooming, is created with pure CSS.
The CSS background-image property is used for specifying the images acting as the slideshow. While different CSS 3 properties like transform, z-index etc are used for creating the effect.
Have a look at the demo below where you may also find the code.
The demo of slideshow without JavaScript
In this demo, four images are used by using the background-image CSS property. The images are specified in the markup section by using the <div> tag. In the main div tag, the slideshow class is referenced while div tags containing the background image` are given the slideshow-image class.
Have a look:
See online demo and code
The markup used in the demo for background images:
<div class="slideshow">
<div class="slideshow-image" style="background-image: url('https://www.jquery-az.com/jquery/images/slider-image-1.jpg')"></div>
<div class="slideshow-image" style="background-image: url('https://www.jquery-az.com/jquery/images/slider-image-2.jpg')"></div>
<div class="slideshow-image" style="background-image: url('https://www.jquery-az.com/jquery/images/slider-image-1.jpg')"></div>
<div class="slideshow-image" style="background-image: url('https://www.jquery-az.com/jquery/images/slider-image-2.jpg')"></div>
</div>
You may add more images as the background. However, you have to update the “$items” variable in SCSS.
The compiled CSS and complete code can be seen on the demo page.
The uncompiled CSS can be seen here (Credit ibanez182 @ http://codepen.io/).
See the following demo with five background images.
A demo of using five images and faster sliding of background images
In this demo, the time of the animation is kept at 2 seconds with a transition time of 1 second. In the last example, the animation time was four seconds with 0.5 seconds for the transition.
See online demo and code
For adding more or less slides, you may either have a look in the CSS code of the demo page (for five or four slides) where the respective child with pseudo class are added after CSS compilation. For example, after adding the fifth slide, this CSS is compiled:
.slideshow-image:nth-child(5) {
-webkit-animation-name: kenburns-5;
animation-name: kenburns-5;
z-index: 0;
}
To make changes, go to the credit page given in the above section. In the CSS part, change the number of slides as you want in the $items variable. You may also adjust the speed of animation and transition there along with other properties.
After that, get the compiled CSS and place it in your external or internal CSS. Alternatively, you may do this manually by getting this code from the demo page of this tutorial.