Simple Ken Burns effect using CSS Keyframes Animation

byCodingFlicks -August 13, 2020

0

Simple Ken Burns Effect

Ken Burns's effect is an animation of any image by panning and zooming. It is achieved in web design with some simple CSS code. The fundamental idea of this ken burns effect was invented by a US-based documentarian named Ken burns. Nowadays, Some web designers using this technique in their web design strategy. Using this Ken Burns photo effect, we will get an excellent pan and zoom effect of the image that we will use as a background of our homepage.

Today we will create a Simple Ken Burns effect using CSS Keyframes Animation on a simple-looking homepage. Earlier I have shared a blog on Responsive Team Accordion using Bootstrap. In this tutorial of Simple Ken Burns effect using CSS Keyframes Animation, we will use Plain HTML and CSS.

First, we will start with HTML markup. I have created a simple nav element with a div named logo and a primary menu with only five anchor tags. Then I will take another div element with "banner-img" class, where I place an image used to create our required ken burns effects. A place banner image will be dull, so I took another div element with a "banner-text" class and provided a header element, some text, and call-to-action button just like we see on a typical homepage. That's it with the HTML markup for this project.

You may also like:

We are moving on to CSS code. First, we have discarded the document default padding and margin by giving the body a margin and padding to 0. I used Lato as a font-family for the project. After that, I gave the Nav element a position fixed property and also gave it a z-index value of 1. I did this because I want nav to be top of the banner. I have given a custom 1170px width to the nav element and tried to make it in the middle by giving it top and left value. Then I styled the logo text and placed that to the right by giving it a float left the property.

Then comes the menu, which I placed to the right by giving it float right value. Then I did some styling for the anchor tags inside the "menu" class. For the banner image, I provided a width of 100% and a height of 100vh to make full-width of the viewport. Then I have given it overflow hidden and relative position value as well. I set an animation for the image with the name "animate" and give it a 40s animation duration and an animation timing function. I placed the banner text element slightly left of the homepage but giving it an absolute position, top, and left value. After that, I did some basic styling for all the elements inside the banner-text class. For the CSS keyframes animation, I set the CSS like a way so that at the beginning, the image will start scaling bigger for the bottom right origin, and at 100%, the image will finish transforming form scale 1 to 1.3.

Simple Ken Burns effect using CSS (Source Code):

To create this snippet, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.

HTML:

<nav>
<div class="logo">
Company logo</div>
<div class="menu">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Portfolio</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
</div>
</nav>

<div class="banner-img">
<img src="https://i.postimg.cc/VsDSN2k5/1.jpg">
</div>
<div class="banner-text">
<h2>
Take the lead in style</h2>
<p>
Our latest generation of cars, trucks and SUVs comes loaded with upgrades that extend beyond the surface.</p>
<a href="#">Contact Us</a>
</div>

CSS:

body{
margin: 0;
padding: 0;
font-family: lato;
}
nav {
position: fixed;
z-index: 1;
left: 15%;
top: 3%;
    width: 1170px;
}
.logo {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-size: 20px;
    float: left;
}
.menu {
float: right;
}
.menu a {
text-decoration: none;
color: #fff;
padding: 0 15px;
font-size: 18px;
}
.banner-img {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}

.banner-img img {
width: 100%;
animation: animate 40s ease;
position: absolute;
}
.banner-text {
position: absolute;
top: 30%;
left: 10%;
width: 500px;
height: 200px;
background: rgba(0,0,0,0.5);
color: #ffffff;
padding: 3%;
}

.banner-text h2 {
text-transform: uppercase;
font-size: 38px;
margin: 10px 0;
}
.banner-text p {
text-transform: uppercase;
line-height: 28px;
}
.banner-text a {
background: deeppink;
text-decoration: none;
color: #fff;
padding: 10px 15px;
display: inline-block;
margin-top: 15px;
font-weight: bold;
text-transform: uppercase;
border-radius: 50px;
}

@-webkit-keyframes animate {
0% {
-webkit-transform-origin: bottom right;
-moz-transform-origin: bottom right;
-ms-transform-origin: bottom right;
-o-transform-origin: bottom right;
transform-origin: bottom right;
transform: scale(1.0);
}
100% {
transform: scale(1.3);
}
}

I hope you liked the snippet. Please feel free to leave a comment down below. I will try to answer them as soon as I can. Thanks for visiting the blog.

Please do not enter any spam link in the comment box.