Distortion – ThemePunch

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.

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

<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

<li data-transition="fade"


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

}'>


<img class="rev-slidebg" src="assets/images/transparent.png" data-lazyload="assets/images/distort_5.jpg">





</li>