How to Add the Ken Burns Effect in Divi | BeSuperfly

How to Add the Ken Burns Effect in Divi

by

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 the Ol’ Trusty 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: the trusty ol’ CSS.

Add the snippet of CSS below wherever your CSS is chillin’. You can also download the entire layout at the bottom of this post.

gimme that 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!

Stay Fly,
Jake & John

10 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

Submit a Comment

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

Subscribe to receive our fly resources & special offers.