webdevpuneet.com

Related Snippets

61 in Carousels & Sliders category
46–51 of 60

Ken Burns Slideshow

Recently Viewed Carousel

Coverflow Carousel

Auto-Play Carousel

Testimonial Slider

Countdown-Ring Carousel

Ken Burns Slideshow — Pan-Zoom Image Slider HTML CSS JS

Ken Burns Slideshow · Carousels · Plain HTML, CSS & JS · Live preview

CategoryCarousels & Sliders
TagsCSS Animation

Copy & paste

Source Code

<div class="kb-stage" id="kbStage">
  <div class="kb-slides" id="kbSlides"></div>
  <div class="kb-overlay">
    <h2 id="kbCap"></h2>
    <div class="kb-dots" id="kbDots"></div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Transform-based pan-zoom
A keyframe animates scale and translate, so the motion is GPU-smooth.
Cover-sized images
background-size: cover keeps the frame filled as the image scales.
Per-slide re-trigger
A reflow trick restarts the pan animation each time a slide becomes active.
Opacity crossfade
Stacked slides fade between each other for a soft, filmic transition.
Fading captions
Captions fade out and back in on change instead of snapping.
Hover-pause autoplay
Pauses while hovered so viewers can read, resumes on leave.
Dot nav with timer reset
Jump to any slide; manual nav resets the interval.
Photo-ready & no library
Swap gradients for img URLs; plain HTML/CSS/JS with zero dependencies.

About this UI Snippet

Ken Burns Slideshow — Slow Pan-and-Zoom Crossfading Image Slider

Screenshot of the Ken Burns Slideshow snippet rendered live

The Ken Burns effect — named for the documentary filmmaker — brings still images to life by slowly panning and zooming across them. Applied to a slideshow, it turns a static gallery into cinematic motion. This snippet builds it in plain HTML, CSS, and vanilla JavaScript: slides that drift and zoom while crossfading, with captions, dot navigation, autoplay, and hover-pause — no library.

The pan-zoom is one keyframe

Each active slide runs a @keyframes that animates its transform from a slightly zoomed, offset start to a different scale and position over several seconds — a slow drift across the image. Because it animates transform (scale and translate), it is GPU-accelerated and smooth, and the image is sized background-size: cover so it always fills the frame even as it scales. Varying both scale and translate is what gives the effect its characteristic gentle camera-move feel rather than a plain zoom.

Re-triggering the motion per slide

The subtle bit: the pan animation must restart each time a slide becomes active, or only the first slide would ever move. When showing a slide, the snippet sets animation: none, forces a reflow (void offsetWidth), then clears it — the standard reflow trick that restarts a CSS animation. So every slide gets a fresh pan as it comes in, not just on initial load.

Crossfade, not cut

Slides are stacked and transition their opacity, so the outgoing image fades as the incoming one appears — a soft crossfade rather than a hard cut. Combined with the continuing pan underneath, the transition feels filmic. The caption fades out and back in on each change so text never abruptly swaps.

Autoplay with considerate controls

It advances automatically on an interval, but pauses while the pointer is over the stage so viewers can read a caption or study an image, and resumes on leave. Dot navigation lets you jump to any slide and resets the timer so a manual pick is not immediately overridden. These touches — hover-pause, timer reset on manual nav, active-dot indicator — are what separate a polished slideshow from a bare auto-rotator.

Drop-in with real photos

The demo uses gradients so it runs with no assets, but each slide accepts an img URL — set the background to your photo and it pans across the real image. Tune the durations, the pan keyframe start/end, and the crossfade length to taste. It is a clear, dependency-free reference for the Ken Burns transform animation, CSS-animation re-triggering, and a considerate autoplay slideshow. Worth keeping in mind with real photography: because the pan keyframe both scales up and translates the image, a tightly cropped subject can drift toward the edge of frame at the animation's extremes — leaving a little extra margin around the subject when sourcing or cropping images gives the pan room to move without ever cutting off the thing the photo is actually about. will-change: transform, opacity is set on every slide for the same reason performance-sensitive carousels use it: it hints to the browser to promote the element to its own compositor layer ahead of time, so the very first frame of a pan-zoom doesn't stutter while the browser allocates that layer mid-animation.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA slideshow renders, each slide slowly panning and zooming while crossfading.
  2. 2
    Let it autoplaySlides advance on an interval; the caption and active dot update each time.
  3. 3
    Navigate manuallyClick a dot to jump to a slide; the autoplay timer resets so it is not skipped.
  4. 4
    Hover to pauseMove the pointer over the stage to pause; leave to resume.
  5. 5
    Use real photosGive each SLIDES entry an img URL — the pan-zoom plays over your image.
  6. 6
    Tune the motionAdjust the kbPan keyframe and durations for a stronger or subtler effect.

Real-world uses

Common Use Cases

Hero and banner slideshows
Add cinematic motion behind a headline, with a keyframe animating scale and translate so slow pan and zoom stays smooth.
Photo galleries and portfolios
Bring still images to life with stacked slides that crossfade, and compare with a standard photo gallery for grid browsing.
Travel and real estate listings
Showcase places with gentle motion, using background-size: cover so the frame stays filled as the image scales.
Product and lookbook showcases
Pan across product photography, with a reflow trick restarting the animation every time a slide becomes active.
Landing page backgrounds
Provide an animated image backdrop as a lighter alternative to a video background hero, with caption, dots and hover pause.
Related: Pixi.js Particle Field
See the Pixi.js Particle Field for a related animations pattern worth pairing with this one.

Got questions?

Frequently Asked Questions

Each active slide runs a @keyframes animation on its transform, going from a slightly larger scale with one offset to a different scale and offset over several seconds. Because it animates transform (scale + translate) rather than width/height or background-position, it is GPU-accelerated and smooth. background-size: cover keeps the image filling the frame at every scale.

A CSS animation runs once when applied; if the keyframes are already on the element, switching which slide is active will not replay them. So when a slide becomes active, the code sets animation: none, reads offsetWidth to force a reflow, then clears the inline animation — the standard trick to restart a CSS animation. Without it, only the first slide would ever pan.

Each SLIDES entry supports an img property; the code sets the slide background to url(img) when present (falling back to the gradient otherwise). Just provide image URLs (and captions), and the pan-zoom and crossfade play over your photos. Use appropriately sized images since they are scaled up slightly by the effect.

Autoplay is convenient but can advance before a viewer finishes reading a caption or looking at an image. Pausing when the pointer enters the stage (and resuming on leave) gives the viewer control without needing an explicit pause button. Manual dot navigation also resets the timer so your chosen slide is not immediately replaced by the next auto-advance.

Hold the current index in state and render slides/dots from an array. Run the autoplay interval in a useEffect (React), onMounted/onUnmounted (Vue), or ngOnInit/ngOnDestroy (Angular), clearing it on cleanup, and pause it on hover handlers. The transform keyframe and crossfade CSS are framework-agnostic; for the re-trigger, toggle a key or class so the incoming slide remounts/replays.