How to add the Ken Burns Effect to the Divi Fullwidth Header

by | Aug 9, 2016 | CSS Tips & Tricks, Headers and Sliders, Images

Sign up to receive all the latest themes, tutorials, tips & tricks from Divi Soup

How to add the Ken Burns Effect to the Divi Fullwidth Header

UPDATE: Code adjusted to work with Firefox 🙂

Recipe #21 is a question that was asked by Peter Bartolomy in the Divi Facebook groups. At the time I was going through my Evernote looking for an idea for my next recipe and that post jumped out at me as it was something I thought a decent header should be able to do without the need for an extra plugin. Most people will use Slider Revolution or similar to achieve this effect but Peter wanted a solution without a plugin so as ever, the need to solve the problem took over ;).

Peter was trying to implement the effect from this Codepen and whilst I have changed the code quite substantially, that was my starting point. The main difficulty with implementing this effect on the Divi fullwidth header is that it needs to be added to the background image, and the background image does not have a CSS class or a box in the module’s custom CSS tab to add code so the usual solution would be JS or PHP, but I wanted to do it with just CSS.

You can view the demo here which is on loop so you can see the effect without having to reload the page, but the code in the recipe stops the effect when it is finished.

Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!

So let’s get cooking!

ingredients

The Divi Theme from Elegant Themes

An active child theme

An suitable image sized at 1920 x 1200px.

cooking-time

This should take you around 5 minutes max.

preparation

The first thing we need to do is set up our section. So add a new fullwidth section and then add the fullwidth header module.

Add Ken Burns Effect to the Divi Fullwidth Header

Open the module settings and click on the Custom CSS tab, give the module a CSS Class of ds-kenburns-header.

Add Ken Burns Effect to the Divi Fullwidth Header

In the General Settings tab, set Make Fullscreen to Yes, then add your title, subtitle and buttons and any other settings you want but DO NOT add a background image, we are going to do this with CSS. Then Save & Exit.

Add Ken Burns Effect to the Divi Fullwidth Header

The final thing we need to do with the header is to open the section settings and set the Transparent Background Color option to Yes, this is very important as without doing this you won’t see your image.

Add Ken Burns Effect to the Divi Fullwidth Header

 

method

The only other thing we have to do to get this effect working is to add the CSS. So copy and paste the code below into your child theme stylesheet or your Divi Options custom CSS Box.

What we are doing with this CSS is:

  • Setting the position of the module to relative so we can apply an absolute position to the background image
  • Adding the background image using the before pseudo class and making the image slightly larger than the viewable area so when it moves we don’t get any white space around it
  • Then we are scaling the size of the image and moving it a little using keyframes to create the zoom and pan which is the Ken Burns effect.

Check the comments in the CSS to see which values you might want to change to achieve the movement which best suits your chosen image.

/*-----Ken Burns Header-----*/

.ds-kenburns-header {
    overflow:hidden ;
    position: relative;
    padding: 0;
}

.ds-kenburns-header:before {
    content: "";
    position: absolute;
    left:0; /*Left and Top sets the alignment of the image, you may need to change these if you want the image to move in a different direction*/
    top:0;
    width: calc(100vw + 120px); /*We are adding some extra width and height to the image so when it zooms and pans we don't get any whitespace around it. You may need to change these values if you change the values in the keyframes section of CSS below*/
    height: calc(100vh + 150px);
    z-index: -1;
    background: url(https://divisoup.com/playground/wp-content/uploads/2016/08/ladybug2.jpg); /*Chnange to the URL of the image you want to use*/
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -ms-animation:move 8s ease forwards;
    -webkit-animation:move 8s ease forwards;
    -0-animation:move 8s ease forwards;
    -moz-animation:move 8s ease forwards;
    animation:move 8s ease forwards; /* This sets the duration of the effect and the value 'forwards' tells the effect to stop when its finished rather than loop. */
}

@keyframes move {
    from {
    -ms-transform: scale3d(1); 
    -webkit-transform: scale3d(1); 
    -o-transform: scale3d(1); 
    -moz-transform: scale3d(1); 
    transform: scale3d(1); /*This tells the image to start at its original size*/
  }
    to {
    -ms-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
    -webkit-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
    -o-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
    -moz-transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px);
    transform: scale3d(1.2, 1.2, 1.2) translate3d(-150px, -120px, 0px); /*This tells the image to finish at 1.2x it's original size and at a position of -150px on the X axis and -120px on the Y axis. You can adjust these values to get the effect you want*/
  }
}

 

And that’s it.

If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 🙂

Michelle X

Michelle Nunan is a multi-award winning marketer & trainer and freelance web designer as well as a wife and mother of two beautiful girls and one cheeky Black Labrador called Harley. Michelle has been building websites since the late nineties, back in the days of GeoCities and Napster, before the web was the wonderful place it is now.

Join me on Facebook

WP Theme FAQs
Divi Switch
WordPress Theme Editor
Stock Images for as little as $0.69 each
Elegant Marketplace - Divi Child Themes, Plugins and Tutorials
Elegant Themes

Other recipes you might like...

Pin It on Pinterest

Share This
pro-membership

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!