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!
BOOOOM! Awesome work. Chapeau bas. My respect. Thank you!
Thank you!
So nice! And even better: the free layout! Thanks a lot!
You’re very welcome, Elisandro. Enjoy!
Thank you so much for this tutorial, as I love this effect. Also love the new site 🙂 Long time Divi user here.
Thanks for the kind words!
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.
Hi Richard – parallax works for us on our Anthem demo via Firefox 50.1.0. What version are you on?
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?
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.
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!
Does the layout only work if you have the anthem theme installed?
Nope! This will work on any Divi site! Just change the CSS classes and IDs if you like! 🙂
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
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!
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
Hey Jamie, we actually used a text editor/FTP client (we like Atom and Coda). Then pasted our code into the Custom CSS section.