Ken Burns Effect

The Ken Burns effect is added to a Slide's Main Background image as "data-" attributes

An important thing to keep in mind when working with the Ken Burns effect is that an image’s ability to move in any given direction is based on how it fits into its slide container.

As an example, if you wanted to move an image from left to right, an image with a slightly higher width ratio than the slider, along with an equal height would work best.  So if your slider is 1000×500, an image sized at 1500×500 would pan left to right nicely.

And likewise, to pan an image up/down, if the slider’s size was 1000×5000, an image with a 1000×1000 size would work best.

  • data-kenburnson off
    Activates the Ken Burns option for the slide's main background.
  • data-durationThe amount of time the movement should last for in milliseconds.
  • data-easeLeave at "Linear.easeNone" for a traditional pan/zoom.
  • Zoom Indata-scalestart="100" data-scaleend="150"
  • Zoom Outdata-scalestart="150" data-scaleend="100"
  • Panning OptionsThe two numbers used in the "data-offsetstart" and "data-offsetend" represent horizontal(x) and vertical(y) movements.
    • Pan Left to Rightdata-offsetstart="-999 0" data-offsetend="999 0"
    • Pan Right to Leftdata-offsetstart="-999 0" data-offsetend="999 0"
    • Pan Top to Bottomdata-offsetstart="0 -999" data-offsetend="0 999"
    • Pan Bottom to Topdata-offsetstart="0 -999" data-offsetend="0 999"
  • data-rotatestartAdds a starting 2D rotation (0 to 360)
  • data-rotateendRotates the image the the ending value (0 to 360)