Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

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

The Ken Burns Effect

is available for the Slider's Main Background Image:
https://www.themepunch.com/revsliderjquery-doc/backgrounds-image-video/

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-kenburns
  • on
  • off
Activates the Ken Burns option for the slide's main background.
data-duration
    The amount of time the movement should last for in milliseconds.
    data-ease
      Leave at "Linear.easeNone" for a traditional pan/zoom.
      Zoom In
        data-scalestart="100" data-scaleend="150"
        Zoom Out
          data-scalestart="150" data-scaleend="100"
          Panning Options

          The two numbers used in the "data-offsetstart" and "data-offsetend" represent horizontal(x) and vertical(y) movements.

          Pan Left to Right
            data-offsetstart="-999 0" data-offsetend="999 0"
            Pan Right to Left
              data-offsetstart="-999 0" data-offsetend="999 0"
              Pan Top to Bottom
                data-offsetstart="0 -999" data-offsetend="0 999"
                Pan Bottom to Top
                  data-offsetstart="0 -999" data-offsetend="0 999"


                  data-rotatestart
                    Adds a starting 2D rotation (0 to 360)
                    data-rotateend
                      Rotates the image the the ending value (0 to 360)

                      <!-- BEGIN SLIDE -->
                      <li data-transition="fade">
                       
                          <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                          <img src="assets/images/notgeneric_bg5.jpg"
                               alt="Ocean"
                               class="rev-slidebg"
                               data-bgposition="center center"
                               data-bgfit="cover"
                               data-bgrepeat="no-repeat"
                       
                               data-kenburns="on"
                               data-duration="9000"
                               data-ease="Linear.easeNone"
                               data-scalestart="100"
                               data-scaleend="200"
                               data-offsetstart="0 0"
                               data-offsetend="0 0"
                               data-rotatestart="0"
                               data-rotateend="0">
                       
                      </li><!-- END SLIDE -->

                      Popular Solutions

                      [ess_grid alias="wp-popular-solutions"]
                      Impressum | Datenschutz