The “Ken Burns Effect” was named after American Documentarian Ken Burns for the way he made still images seem to come alive in his movies through a combination of panning and zooming techniques. The effect’s popularity has grown to extend well beyond film and television to just about anywhere that still images meet motion, including the web.

The “Ken Burns Effect” is a great tool for web developers who want to engage their site visitors with visual storytelling. That’s why in today’s post I’m going to show you a way to add this effect to Divi’s fullwidth header module and fullwidth slider module slides. However, its application extends to the other Divi sections and modules as well.

Once you understand the CSS behind the effect, you will have more control over the way your background images move. What I’m showing you today will serve as a great asset in your future projects.

Let’s get started!

Implementing the Design Using Divi

Adding the “Ken Burns Effect” to the Fullwidth Header

Deploy a fullwidth section and add a fullwidth header module.

Select to modify the Fullwidth Header Module Settings. Under general settings update the following:

Title: [enter title]
Subheading Text: [enter subheading text]
Text Color: Light
Text & Logo Orientation: Center
Make Fullscreen: YES
Enter Background Image
Background Overlay Color: rgba(0,0,0,0.28)
Use Parallax effect: YES
Parallax method: CSS

Important Note: The “Ken Burns Effect” will not work unless the CSS parallax method option is selected. I won’t get into the details, but this is how you target the background image using css. Also, this effect will NOT work with the true parallax method. It must be CSS parallax. I explain later how to disable the parallax later if you decide you don’t want it.

Now go to Advanced settings and update the following:

Title Font Color: #ffffff
Title Font: Bold (B) and Capitalize (TT)
Title Font Size: 80px
Subhead Font Color: #eeefa0

Under Custom CSS you need to add a CSS class. This is what triggers the “Ken Burns Effect” via CSS. I’ve included four options to choose from. Here is a list of each with a short description:

kb-zoomin – zooms in on the image
kb-zoomout – zooms out from the image
kb-zoomin-right – zooms in and pans right on the image
kb-zoomout-right – zooms out and pans right on the image

For now, add the “kb-zoomin-right” CSS class.

Save & Exit

It’s time to add our CSS for the “Ken Burns Effect”. Go to Divi → Theme Settings and enter the following in the Custom CSS section:

.kb-zoomout .et_pb_slide .et_parallax_bg {
   animation: zoomout 7s forwards;
  -ms-animation: zoomout 7s forwards;
  -webkit-animation: zoomout 7s forwards;
  -0-animation: zoomout 7s forwards;
  -moz-animation: zoomout 7s forwards;

}

.kb-zoomin .et_pb_slide .et_parallax_bg {
   animation: zoomin 7s forwards; 
  -ms-animation: zoomin 7s forwards;
  -webkit-animation: zoomin 7s forwards;
  -0-animation: zoomin 7s forwards;
  -moz-animation: zoomin 7s forwards;

}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 7s forwards;
  -webkit-animation: zoomin-right 7s forwards;
  -0-animation: zoomin-right 7s forwards;
  -moz-animation: zoomin-right 7s forwards;

}

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 7s forwards;
  -webkit-animation: zoomout-right 7s forwards;
  -0-animation: zoomout-right 7s forwards;
  -moz-animation: zoomout-right 7s forwards;

}

.kb-zoomout .et_parallax_bg {
   animation: zoomout 17s forwards; 
  -ms-animation: zoomout 17s forwards;
  -webkit-animation: zoomout 17s forwards;
  -0-animation: zoomout 17s forwards;
  -moz-animation: zoomout 17s forwards;

}

.kb-zoomin .et_parallax_bg {
   animation: zoomin 17s forwards; 
  -ms-animation: zoomin 17s forwards;
  -webkit-animation: zoomin 17s forwards;
  -0-animation: zoomin 17s forwards;
  -moz-animation: zoomin 17s forwards;

}

.kb-zoomin-right .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 17s forwards;
  -webkit-animation: zoomin-right 17s forwards;
  -0-animation: zoomin-right 17s forwards;
  -moz-animation: zoomin-right 17s forwards;

}

.kb-zoomout-right .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 17s forwards;
  -webkit-animation: zoomout-right 17s forwards;
  -0-animation: zoomout-right 17s forwards;
  -moz-animation: zoomout-right 17s forwards;

}



@keyframes zoomout{
0% {
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}


100% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;


}


100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomout-right{
0%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    animation-timing-function: linear;
}


100%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin-right{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}
    

100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}

Go check out your header now to see the effect in action.

Here is a gif to show you what it should look like. Bare in mind that the gif shows the movement as choppy. This will not be the case on your website.

Adding the “Ken Burns Effect” to a Fullwidth Slider

Deploy a fullwidth section and add a Fullwidth Slider Module.

Select to modify the Fullwidth Slider Module Settings. Under general settings update the following:

Controls: Hide Slider Controls
Automattic Animation: ON
Automatic Animation Speed (in ms): 6000
Use Parallax Effect: YES
Parallax Method: CSS

Under Custom CSS add the CSS class “kb-zoomout”. Since this is a slider, I recommend disabling the parallax effect so go ahead and add another css class called “no-parallax” next to “kb-zoomout”. I’ll explain more on the no-parallax option later.

Save & Exit

Under General Settings, add your first slide and this will take you to the Slide Settings. Under General Settings update the following:

Heading: [enter your heading]
Upload a background image (the size should be at least 2500px wide and 800px high)
Background Image Size: Cover
Use Background Overlay: YES
Background Overlay Color: rgba(0,0,0,0.28)

Save

Now duplicate your slide to create a total of four slides.

Go back and update the additional slides with whatever image and header you want.

Save & Exit

Check out your slider now on the live site. It should look like this:

Disable Parallax But Keep The “Ken Burns Effect”

Unfortunately, this method only works with the parallax option selected. This is cool because it allows you to have both parallax and “Ken Burns Effect” happening simultaneously. But sometimes you may not want parallax, especially for sliders.

If you want to disable the CSS parallax method but still keep the “Ken Burns Effect,” add the following custom CSS in the Custom CSS section under Divi → Theme Settings:

.no-parallax .et_pb_parallax_css {
    background-attachment: inherit;
    background-position: center center;
}

.no-parallax .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
    background-attachment: inherit;
    background-position: center center;
}

Now simply add an additional class called “no-parallax” next in your Custom CSS section of your module settings right next to the “Ken Burns Effect” class. For example if you want a zoom-in effect without parallax you would add “kb-zoomin no-parallax” for your CSS class.

Use It Anywhere!

This effect is not limited to the fullwidth headers and sliders. You can also add this effect to any standard section. To do this go to the section settings. Under general settings, add your background image and make sure to select the CSS parallax method. Then add your CSS class under Custom CSS.

For standard sliders, just modify the slider module settings. Make sure to select the CSS parallax method and update your CSS class.

Modifying the CSS for Different Effects

If you want to change the speed and direction of your image animations, you need to update the custom CSS you added to your theme settings.

Let’s take the kb-zoomout CSS for the fullwidith slider as an example:

.kb-zoomout .et_pb_slide .et_parallax_bg {
   animation: zoomout 7s forwards; 
  -ms-animation: zoomout 7s forwards;
  -webkit-animation: zoomout 7s forwards;
  -0-animation: zoomout 7s forwards;
  -moz-animation: zoomout 7s forwards;
}

The same animation property is repeated 5 times so that it works on all browsers. But each one has three values: zoomout, 7s, and forwards.

The value “7s” represents the animation duration in seconds. Change this to increase or decrease the time your animation take to complete.

The property “forwards” represents the animation fill mode. Change this to “infinite” if you want the animation to loop.

The value “zoomout” is the animation name that calls the animation set in the following CSS:

@keyframes zoomout{
0% {
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}


100% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

What’s important about the CSS settings above are the 1.5’s and the 1.1’s next to the scale3d value. This controls the size of your image. The 1.5 essentially represents 150%. So this code tells your image to take on 150% of its original size. The 1.1 is 110% of the original image size.

You will notice that the 1.5’s are under the 0% and the 1.1’s are under the 100%. The 0% section represents the start of the animation and the 100% represents the end. So here the image starts at 1.5 (150%) and ends at 1.1 (110%). You can change these values so that your image can start bigger or smaller and end bigger or smaller. For example, you may want to change all the 1.5’s to 1.3’s so that your image doesn’t zoom in so far and end up looking too grainy.

The value “translate3d(0px,0px,0px)” is the part of the code that changes the position of the image according to the x,y, and z axis. You can change the x and y axis to adjust the image. For example if you want the image to move to the right 30px and down 50px, change the values to (30px, 50px, 0px).

The animation-time-function specifies the speed curve of an animation. Right now it is set to linear which basically means that the speed stays the same throughout the animation. You can change this to other values like “ease”, “ease-in”, “ease-out” to modify the speed curve.

Final Thoughts

I hope you take advantage of the “Ken Burns Effect” on your website. Implementing it with Divi is simple. Now you don’t have to rely on limiting and bloated plugins to do this for you. Plus, once the CSS is in place, you can use it on any section of your site with a few simple steps.

If you have any questions or feedback doesn’t hesitate to post a comment.

Enjoy!

The post How to Create and Use the “Ken Burns Effect” within Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!