Distortion

  • QUICK TIP:
    Review the Basic Template Setup for information about how to setup a custom production environment.
To get started with the Distortion Add-On, first add the "revolutions-addons" folder into your production site:
Next, add the Distortion stylesheet and script. The script should placed below all other scripts on the page.

Next, assign a variable to your slider's main settings script as shown in the following example.

Then initialize the Distortion Addon directly after the slider settings (shown above)

Next, add the "data-liquideffect" attribute to your slides containing your Distortion settings:
  • imageThe displacement map to use for the distortion effect. See inside the "revolution-addons/distortion/images/" folder for available map choices
  • imagesize"width|height"
    The original width and height of your main image (pixels)
  • autoplaytrue false
    Choose if the effect should autoplay without user interaction
  • scalexThe initial scaleX value for the displacement map
  • scaleyThe initial scaleY value for the displacement map
  • speedxSpeed for the displacement map's left movement
  • speedySpeed for the displacement map's top movement
  • rotationxrotationX movement for the displacement map
  • rotationyrotationY movement for the displacement map
  • rotation2d rotation movement for the displacement map
  • transtimeThe slide transition duration in milliseconds
  • easingThe easing function applied to the slide transition:
    https://greensock.com/ease-visualizer
  • transitionxAnimate the scaleX value by this offset number
  • transitionyAnimate the scaleY value by this offset number
  • transpeedxAnimate the speedX value by this offset number
  • transpeedyAnimate the speedY value by this offset number
  • transrotxAnimate the rotationX value by this offset number
  • transrotyAnimate the rotationY value by this offset number
  • transrotAnimate the 2D rotation value by this offset number
  • interactivetrue false
    Enable mouse interation for the effect
  • event"mousemove" "mousedown"
    The mouse event to trigger the movement
  • mobiletrue false
    Disable mouse events on mobile devices
  • intertimeThe mouse interaction transition time in milliseconds
  • intereasingThe easing function for the transition
    https://greensock.com/ease-visualizer
  • interscalexAnimate the scaleX value by this offset number on user-interaction
  • interscaleyAnimate the scaleY value by this offset number on user-interaction
  • interotationAnimate the 2D rotation value by this offset number on user-interaction
  • interspeedxAnimate the speedX value by this offset number on user-interaction
  • interspeedyAnimate the speedY value by this offset number on user-interaction