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!