Get Started
Dynamic Backgrounds
Ken Burns Effect

Ken Burns Effect

How to Create the Ken Burns Effect

The Ken Burns effect is a subtle zoom and pan animation applied to an image, often used to bring life to static images. In this example, we’ll enhance the existing code by adding the Ken Burns effect in a smooth and friendly way.

Step 1: Adjust the Image Styling

First, ensure the image is set up to fill the container properly without stretching or distortion:

  • You’re using object-fit: cover;, which is perfect for keeping the image’s aspect ratio while making sure it fills the container.
  • Make sure the .ken-burns-container has overflow: hidden; so the image zooms in smoothly without showing its edges.

Step 2: Create the Ken Burns Zoom and Pan Animation

To get the desired zoom and pan effect, we’ll modify your existing CSS animation. You’ve already implemented a zoom, so we’ll just add a bit of movement (panning) to it.

Replace your current @keyframes with this:

@keyframes kenBurnsZoomIn {
  0% { 
    transform: scale(1.0) translate(0, 0); /* Start at full size, no movement */
  }
  100% { 
    transform: scale(1.15) translate(-5%, -5%); /* Zoom in and move left and up */
  }
}

What this does:

  • Zoom: The image scales from 1.0 to 1.15, making it slowly zoom in.
  • Pan: The translate(-5%, -5%) moves the image slightly up and to the left for a dynamic effect.

Step 3: Control the Timing

The animation duration of 20s (20 seconds) is a good choice for a smooth, gradual zoom. The ease-in-out timing function ensures the animation starts and ends gently.

.ken-burns-container img.kenBurnsZoomIn {
  animation: kenBurnsZoomIn 20s ease-in-out 1 forwards;
}

Feel free to adjust the time:

  • Shorter duration: If you want a faster zoom, reduce 20s to a lower value (e.g., 10s).
  • Slower duration: For a more relaxed zoom, increase the time (e.g., 30s).

Step 4: Image Transitions on User Input

Your JavaScript is set up to fade out the current image and fade in a new one based on user input. This is great because it makes the effect dynamic and interactive!

Here’s a quick reminder of what happens:

  1. Fade Out: The fade-out class fades out the current image over 1 second.
  2. Change Image: After the fade-out, the new image source is loaded.
  3. Restart Animation: Once the new image is loaded, the kenBurnsZoomIn class is reapplied to start the zoom and pan effect again.

Here’s your function that handles this perfectly:

function changeImageAndRestartAnimation(newImageSrc) {
  const backgroundImage = document.getElementById('backgroundImage');
  // Fade out the current image
  backgroundImage.classList.add('fade-out');

  setTimeout(() => {
    // Once the image is faded out, change the source
    backgroundImage.src = newImageSrc;
    backgroundImage.classList.remove('fade-out');
    // Restart animation with a slight delay
    setTimeout(() => {
      backgroundImage.classList.remove('kenBurnsZoomIn');
      void backgroundImage.offsetWidth; // Trigger DOM reflow
      backgroundImage.classList.add('kenBurnsZoomIn');
    }, 20); // Small delay to ensure class removal takes effect
  }, 1000); // Matches the fade-out time (1 second)
}

Step 5: Add Fade Transition for Smoothness

You already have a CSS fade transition, which is great for ensuring smooth transitions when switching images:

.ken-burns-container img {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}

.ken-burns-container img.fade-out {
  animation: none; /* Stop any animation */
  opacity: 0;
}

Why this works:

  • The opacity: 0 makes the image fade out.
  • The new image fades in after the old one fades out, with a seamless effect.

Step 6: Testing the Effect

Now that you’ve completed the setup:

  1. View the code in a browser: The Ken Burns effect will zoom in and pan your image gently.
  2. Test user input: When user input triggers a new image, the fade-out happens, the image changes, and the zoom starts over.

Additional Enhancements

  • Loop Animation: You can add a @keyframes for kenBurnsZoomOut to create a loop, making the effect continuous.
  • Randomize Start Position: Instead of starting at the top-left corner, you can randomize the starting point of the zoom for a more natural feel.
  • Custom Easing: Experiment with different easing functions to achieve various speeds and effects.

These enhancements can be added to your existing code to make the background effect even more dynamic and realistic.

Additional Resources

Last updated on
WalkthroughDynamic Video