The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchase Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

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.


<!-- DISTORTION STYLESHEET -->
<link type="text/css" href="revolution-addons/distortion/css/distortion.css" />


<!-- DISTORTION SCRIPTS -->
<script type="text/javascript" src="revolution-addons/distortion/js/pixi.min.js"></script>
<script type="text/javascript" src="revolution-addons/distortion/js/revolution.addon.distortion.min.js"></script>

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


var slider = jQuery('#rev_slider_1').show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

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


RsLiquideffectAddOn(jQuery, slider);

Next, add the "data-liquideffect" attribute to your slides containing your Distortion settings:

image
    The 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)
    autoplay
    • true
    • false
    Choose if the effect should autoplay without user interaction
    scalex
      The initial scaleX value for the displacement map
      scaley
        The initial scaleY value for the displacement map
        speedx
          Speed for the displacement map's left movement
          speedy
            Speed for the displacement map's top movement
            rotationx
              rotationX movement for the displacement map
              rotationy
                rotationY movement for the displacement map
                rotation
                  2d rotation movement for the displacement map
                  transtime
                    The slide transition duration in milliseconds
                    easing
                      The easing function applied to the slide transition:https://greensock.com/ease-visualizer
                      transitionx
                        Animate the scaleX value by this offset number
                        transitiony
                          Animate the scaleY value by this offset number
                          transpeedx
                            Animate the speedX value by this offset number
                            transpeedy
                              Animate the speedY value by this offset number
                              transrotx
                                Animate the rotationX value by this offset number
                                transroty
                                  Animate the rotationY value by this offset number
                                  transrot
                                    Animate the 2D rotation value by this offset number
                                    interactive
                                    • true
                                    • false
                                    Enable mouse interation for the effect
                                    event
                                    • "mousemove"
                                    • "mousedown"
                                    The mouse event to trigger the movement
                                    mobile
                                    • true
                                    • false
                                    Disable mouse events on mobile devices
                                    intertime
                                      The mouse interaction transition time in milliseconds
                                      intereasing
                                        The easing function for the transitionhttps://greensock.com/ease-visualizer
                                        interscalex
                                          Animate the scaleX value by this offset number on user-interaction
                                          interscaley
                                            Animate the scaleY value by this offset number on user-interaction
                                            interotation
                                              Animate the 2D rotation value by this offset number on user-interaction
                                              interspeedx
                                                Animate the speedX value by this offset number on user-interaction
                                                interspeedy
                                                  Animate the speedY value by this offset number on user-interaction


                                                  <!-- BEGIN DISTORTION SLIDE -->
                                                  <li data-transition="fade"

                                                  <!-- distortion settings and image map -->
                                                  data-liquideffect='{

                                                  "image":"revolution-addons/distortion/images/bwmap2.jpg",
                                                  "imagesize":"2273|1278",
                                                  "autoplay":true,
                                                  "scalex":2,
                                                  "scaley":2,
                                                  "speedx":0,
                                                  "speedy":0,
                                                  "rotationx":0,
                                                  "rotationy":0,
                                                  "rotation":0.2,
                                                  "transtime":2000,
                                                  "easing":"Power3.easeOut",
                                                  "transcross":true,
                                                  "transpower":false,
                                                  "transitionx":2,
                                                  "transitiony":2,
                                                  "transpeedx":0,
                                                  "transpeedy":0,
                                                  "transrotx":0,
                                                  "transroty":0,
                                                  "transrot":0,
                                                  "interactive":true,
                                                  "event":"mousemove",
                                                  "mobile":true,
                                                  "intertime":300,
                                                  "intereasing":"Power2.easeOut",
                                                  "interscalex":0,
                                                  "interscaley":0,
                                                  "interotation":0.4,
                                                  "interspeedx":0,
                                                  "interspeedy":0

                                                  }'>

                                                  <!-- Lazy Load the main image for the Distortion effect -->
                                                  <img class="rev-slidebg" src="assets/images/transparent.png" data-lazyload="assets/images/distort_5.jpg">

                                                  <!-- ***************** -->
                                                  <!-- SLIDE LAYERS HERE -->
                                                  <!-- ***************** -->

                                                  </li><!-- END DISTORTION SLIDE -->

                                                  Popular Solutions