How to Add the Ken Burns Effect in Divi

Published on December 15, 2016

The Ken Burns effect is becoming a more and more popular effect on any full-width photo background. The subtlety of the soft zoom in or out of a photo can set your site above and beyond the competition.

Check out the video above to learn how to implement the Ken Burns effect in Divi today! You can also download the free layout, CSS & header code to implement this on your own site. And if you’ve ever wondered why it’s called the “Ken Burns” effect, you can learn more via Wikipedia.

Step 1: Watch the video.

Go for it… it’s just 6 minutes. It will save you time in the end since you’ll know how it all works!

Step 2: Set the CSS class.

For this tutorial, we set the fullwidth header section CSS class to: anthemKenBurnsHeaderLinear — However, notice we have several styles available in the code below!

Step 3: Add the CSS.

Add the snippet of CSS below wherever your CSS is chillin’.

CSS Code

  /* ANTHEM HEADER STYLE */
.et_pb_text h3 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 8px;
    line-height: 1.2em;
    text-transform: uppercase;
}


/* ANTHEM KEN BURNS - LINEAR */
@media only screen and (min-width: 767px) {
	.anthemKenBurnsHeaderLinear .et_parallax_bg {
		animation: kenburns-linear 45s forwards;
	}
}
@media only screen and (min-width: 767px) {
	.anthemKenBurnsSectionLinear .et_parallax_bg {
		animation: kenburns-linear 30s forwards;
	}
}
@keyframes kenburns-linear {
	0% {
		opacity: 0.7;
    -ms-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
		-webkit-transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
		transform: scale3d(1.05, 1.05, 1.05) translate3d(-15px, 0px, 0px);
		animation-timing-function: linear;
	}
	1% {
		opacity: 1;
	}
	100% {
    -ms-transform: scale3d(1.35, 1.35, 1.35) translate3d(-25px, -55px, 0px);
		-webkit-transform: scale3d(1.35, 1.35, 1.35) translate3d(-25px, -55px, 0px);
		transform: scale3d(1.35, 1.35, 1.35) translate3d(-25px, -55px, 0px);
	}
}

/* ANTHEM KEN BURNS - EASE IN */
@media only screen and (min-width: 981px) {
	.anthemKenBurnsHeaderEaseIn .et_parallax_bg {
		margin-bottom: -60px;
		min-height: calc(100% + 60px);
		animation: kenburns 45s forwards;
	}
}
@media only screen and (min-width: 981px) {
	.anthemKenBurnsSectionEaseIn .et_parallax_bg {
		margin-bottom: -60px;
		min-height: calc(100% + 60px);
		animation: kenburns 30s forwards;
	}
}
@keyframes kenburns {
	0% {
		opacity: 0.7;
		-ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(-25px, -60px, 0px);
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(-25px, -60px, 0px);
		transform: scale3d(1.1, 1.1, 1.1) translate3d(-25px, -60px, 0px);
		animation-timing-function: ease-in;
	}
	1% {
		opacity: 1;
	}
	100% {
		-ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-85px, -55px, 0px);
		-webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-85px, -55px, 0px);
		transform: scale3d(1.5, 1.5, 1.5) translate3d(-85px, -55px, 0px);
	}
}

/* ANTHEM SOCIAL MEDIA FOLLOW */
.anthemSocialMedia .anthemSocialMediaFollow li a.icon::before {
  font-size: 36px;
}
.anthemSocialMedia .anthemSocialMediaFollow li {
  margin-bottom: 8px;
  width: 100%;
  text-align: center;
}
.anthemSocialMedia .anthemSocialMediaFollow li a {
  float: none;
  margin-right: 0;
  text-align: center;
  margin: 0 auto;
}
@media screen and (max-width : 980px) {
  .anthemSocialMedia .et_pb_column {
      margin-bottom: 40px;
  }
}
@media screen and (max-width : 480px) {
  .anthemSocialMedia .et_pb_row .et_pb_column {
      margin-bottom: 45px !important;
  }
  .anthemSocialMedia .et_pb_row .et_pb_column:last-of-type {
      margin-bottom: 0px !important;
  }
}

/* FADE IN */
.fadein-animated.et-animated {
  opacity: 1;
  -webkit-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -moz-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -o-animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  animation: fadeIn 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}

/* FROM BOTTOM */
.bottom-animated.et-animated {
  opacity: 1;
  -webkit-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -moz-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  -o-animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
  animation: fadeBottom 1.0s 1 cubic-bezier(0.44, 0, .52, .94);
}

/* ANTHEM PARALLAX */
.anthemParallax .et_pb_text h2 {
  font-size: 36px;
}
@media screen and (max-width : 980px) {
  .anthemParallax .et_pb_text h2 {
    font-size: 24px;
  }
}

/* DOWN ARROW ANIMATION */
span.scroll-down.et-pb-icon {
  cursor: pointer;
  height: 60px;
  width: 80px;
  margin: 0px 0 0 -40px;
  line-height: 60px;
  position: absolute;
  left: 50%;
  bottom: 30px;
  color: #FFF;
  text-align: center;
  font-size: 70px;
  z-index: 100;
  text-decoration: none;
  text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
  -webkit-animation: ca3_fade_move_down 2s ease-in-out infinite;
  -moz-animation: ca3_fade_move_down 2s ease-in-out infinite;
  animation: ca3_fade_move_down 2s ease-in-out infinite;
}
@-webkit-keyframes ca3_fade_move_down {
  0% {
    -webkit-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
}
@-moz-keyframes ca3_fade_move_down {
  0% {
    -moz-transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -moz-transform: translate(0, 20px);
    opacity: 0;
  }
}
@keyframes ca3_fade_move_down {
  0% {
    transform: translate(0, -20px);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(0, 20px);
    opacity: 0;
  }
}

 

Step 4: Tweak.

Feel free to play around with changing the CSS class to a few of the other options to find out which style works best for you!

17 Comments

  1. BBI

    BOOOOM! Awesome work. Chapeau bas. My respect. Thank you!

    Reply
  2. Elisandro

    So nice! And even better: the free layout! Thanks a lot!

    Reply
    • Nathan Duvall

      You’re very welcome, Elisandro. Enjoy!

      Reply
  3. Knoxville SEO

    Thank you so much for this tutorial, as I love this effect. Also love the new site 🙂 Long time Divi user here.

    Reply
  4. Richard

    Hey, thank you for sharing this awesome tutorial, great work. I just want to know why the parallax effect doesn’t work on firefox, thank you again.

    Reply
    • Nathan Duvall

      Hi Richard – parallax works for us on our Anthem demo via Firefox 50.1.0. What version are you on?

      Reply
  5. Gonzalo

    Hi Nathan,

    Thank you for this effect!! It’s great!!
    But I don’t know it’s not working on my website. I am working in local, and I have done it step by step as you say in the video…
    I have put the CSS into the Custom CSS Box of the Theme Options, but it doesn’t work.
    Could you help me please?

    Reply
    • Nathan Duvall

      Hi Gonzalo. We wouldn’t be much help to you since you’re working in local, but maybe try watching the tutorial video again and retracing your steps, perhaps you missed on somewhere along the line.

      Reply
  6. Dina Rudenko

    Great tutorial! My question is: would you please suggest now to make forward and reverse constantly going (forward and then reverse, then again, so there is no “jumping ” stage)? I have been trying to figure it out with no positive result… probably some JS code? Thank you very much!

    Reply
  7. m davis

    Does the layout only work if you have the anthem theme installed?

    Reply
    • Jake Kramer

      Nope! This will work on any Divi site! Just change the CSS classes and IDs if you like! 🙂

      Reply
  8. Andy

    Hy Guys

    Is there a sort of “list” with the other styles which I can use with this super cool piece of code?

    Thank you for your answer

    Reply
    • Jake Kramer

      Andy, thanks for the love. If you look through our “tutorials” section on our blog, you’ll see a few snippets of code that will work. Additionally, if you purchase Josefin and/or Anthem, you will have many, many more!

      Reply
  9. Jamie

    Thanks Ken,

    That’s awesome 🙂 Just a quickie. Where did you put in that CSS to look like that in Divi? (meaning black background css editor?)

    Thanks Again

    Reply
    • Jake Kramer

      Hey Jamie, we actually used a text editor/FTP client (we like Atom and Coda). Then pasted our code into the Custom CSS section.

      Reply

Leave a Reply to Elisandro Cancel reply

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

Shopping cart0
There are no products in the cart!
Continue shopping
0