How to Create and Use the “Ken Burns Effect” in Divi
Dear DiviManiacs,
Are you looking to add a touch of cinematic flair to your Divi website? The Ken Burns Effect, named after the famous documentary filmmaker, involves panning and zooming across still images to create a dynamic and engaging visual experience. This effect is widely used in video editing but can be equally captivating when applied to web design. Today, we’ll show you how to create and use the Ken Burns Effect in Divi, transforming your static images into animated masterpieces.
Step-by-Step Guide to Creating the Ken Burns Effect in Divi
1. Choose Your Image
First, select a high-quality image that you want to apply the Ken Burns Effect to. Ensure the image has enough resolution to accommodate zooming without losing clarity.
2. Add an Image Module
In your Divi Builder, add a new section and insert an Image Module where you want to display the animated image.
3. Custom CSS for Animation
To achieve the Ken Burns Effect, we’ll need to use some custom CSS. Add the following CSS to your Divi theme options or the page’s custom CSS section.
.ken-burns-effect {
overflow: hidden;
position: relative;
}
.ken-burns-effect img {
position: absolute;
animation: kenburns 10s infinite;
width: 120%;
height: auto;
}
@keyframes kenburns {
0% {
transform: scale(1) translate(0, 0);
transform-origin: center center;
}
100% {
transform: scale(1.1) translate(-5%, -5%);
transform-origin: center center;
}
}4. Apply the CSS Class
Go back to your Image Module settings. Under the Advanced tab, add the class ken-burns-effect to the CSS Class field.
5. Adjust Animation Duration (Optional)
If you want to change the speed of the effect, adjust the 10s value in the CSS keyframes. A lower value will speed up the animation, while a higher value will slow it down.
6. Fine-Tuning the Effect
You can tweak the transform: scale and translate values within the @keyframes kenburns rule to adjust how much the image zooms in and pans. Experiment with these values to get the desired effect.
Example Implementations
Here are a few creative ways to implement the Ken Burns Effect on your Divi website:
1. Hero Section Backgrounds
Use the effect on hero section backgrounds to create an eye-catching entrance for your visitors.
2. Portfolio Galleries
Enhance your portfolio items with subtle animations to draw attention to your best work.
3. Testimonials
Apply the effect to images of clients or projects in your testimonials section to add a dynamic touch.
4. Blog Post Headers
Make your blog post headers more engaging by animating the featured image.
Conclusion
The Ken Burns Effect is a simple yet powerful tool to make your Divi website more dynamic and visually appealing. With just a few lines of CSS, you can transform static images into engaging visual elements that captivate your audience. So, go ahead and try it out on your site—your visitors will be amazed!
Happy designing,
The DiviManiacs Team