You may have heard of the Ken Burns effect but never quite understood what it is exactly. The Ken Burns effect is a way of zooming and panning used in video production. It is used on still images and was developed by Ken Burns, an American documentary filmmaker.
Previously, the technique was called animatics, before Burns used it so prolifically that it became synonymous with his name.Ken Burns is an multi-award winning documentary filmmaker, but it is the camera effect that this article will explore in detail.
The Ken Burns effect, zooming and panning on a still image, is frequently used in many tv shows and documentaries, but most commonly used for animations in website creation.
Thus it is a popular WordPress theme option. It is stylish and offers a more interesting way of looking at static images.
Learn below more about this topic in this article created by our team behind Slider Revolution.
Using the Ken Burns Effect on A Webpage
Adding a slider with Ken Burns effect to your homepage can visually enhance your website and mesmerize your visitors.
The effect is usually used on photos to draw the viewer’s eye to a photo’s highlighted focus. It’s commonly used in screen savers, films, and slideshows and can include a narrator.
Using this technique allows you to use static photos as visual moving displays. By using the simple panning and zoom effects, you can create unique transitions between your frames.
It can be challenging to find your desired theme features when designing your website. The options may be limited to a set number of multiple images, or they don’t have the features you need.
Using a static photograph and panning, zooming, or fading it will keep the viewer’s interest. A still photo can be seen in a split second, then the viewer moves on. Whereas the Ken Burns effect creates something more visually stimulating that they will want to keep watching.
It essentially creates something like a video from a photograph. Zooming in allows users to clearly see the details of the photo.
Why Use A Ken Burns Slider?
Web design often makes good use of the Ken Burns effect as the first thing the audience sees, thus they’re already engaged with vivid imagery. Using it in a slider autoplay makes your slider more exciting. The Ken Burns series of effects can be used on any type of site. It will make your images look highly professional. Using the Ken Burns effect is far less complicated than trying to find out how to zoom in on iMovie for your site.
What makes it fantastic?
- It grabs the attention of your visitors and it can transform the look of your site. It is a subtle, elegant, and stylish moving effect that won’t annoy your users.
- It brings static photographs to life. Use it with an autoplay setting and the slider will captivate visitors.
- Bring motion to a still image. It offers the feel of a video from just one photograph.
- This effect is lightweight. It won’t make your website run slower, thus it’s completely safe to add to a slider.
- It highlights the details. Your visitors will notice the detail of zoomed-in images.
Using the Ken Burns Effect
Much like Ken Burns’ films, the effect named after him is elegant and professional. It doesn’t use a lot of animation and won’t slow down your site. It is popular because it creates gorgeous moving images from still photos. Regardless of which website theme you have, you can utilize this effect.
Applying this technique to your images is up to you. There are no set instructions for the ideal way to do it. It depends entirely on your photo and the sections you want people to notice.
As mentioned, the effect lets you pan and zoom across an image as well as rotate the view. You need to think about how an image will look from all directions within a slider.
Zooming on a photo will showcase the aspects you wish to display. If it is a group photo and you zoom in on one person, it is clear to the viewer who you want to focus on. Zooming out, on the other hand, the viewer gains more context. You could try something like starting zoomed in on a flower and as it zooms out, we see an entire garden. This can be an amazingly effective technique.
Keep the same speed throughout the footage. You don’t want to go faster and then slower and so on. It can distract the viewer if you do this. To achieve a dramatic effect, you could begin and finish the slider with just the still image.
The images should be about 20% wider than the slider you place them in, giving more room to move around with the panning and zoom on the lens.
For example, if you want to pan from right to left, you need the image to be longer than the slider but an equal height. On a slider that’s 1200 x 600, an image that’s 1500 x 600 would look ideal.
If you wish to pan up and down, not across, this will change. If the slider is still 1200 x 600 then you could use a 1200 x 1200 image.
You don’t need to add a caption, but if it is essential, position it at the top or the bottom for the best look.
Captions come from the alt text so be sure that you enter a wonderful caption into this attribute even if you don’t expect people to read it.
You could also add in text or a heading so that search engines can pick up the slide show. Place it below or above the slider for the optimal effect.
The simple way of accessing the Ken Burns effect is with Slider Revolution.
Check out these fabulous examples in action:
Space Opera Slider
This one looks lovely with the slow-motion feature, offering a full-screen experience. This will elevate the look of your WordPress website.
Travel Blog Carousel
This offers an interesting interpretation of the effect. It uses slide backgrounds, but you could also use image layers for a similar effect.
If you enjoyed reading this article about the Ken Burns effect, you should read these as well:
- The best graphic design portfolio examples – 37 websites
- The best CSS gallery code snippets to use yourself
- Here’s how a video slider can take your website to the next level