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

QUICK TIP:

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the Polyfold Add-On, first add the "revolutions-addons" folder into your production site:

Next, add the Polyfold stylesheet and script. The script should placed below all other scripts on the page.


<!-- POLYFOLD STYLESHEET -->
<link rel="stylesheet" type="text/css" href="revolution-addons/polyfold/css/revolution.addon.polyfold.css" />


<!-- POLYFOLD SCRIPT -->
<script type="text/javascript" src="revolution-addons/polyfold/js/revolution.addon.polyfold.min.js"></script>

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


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

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

});

Then initialize the Polyfold Addon:


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

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

});

/*
Instantiate the Polyfold AddOn for the top, bottom or both
The following is an example of how edges can be applied to both the top and bottom of the slider
*/

/* INCLUDE TO ENABLE TOP EDGE */
RsPolyfoldAddOn(tpj, slider, {
position: "top",
color: "#ffffff",
scroll: true,
height: 100,
range: "slider",
point: "sides",
placement: 1,
responsive: true,
negative: false,
leftWidth: 0.5,
rightWidth: 0.5,
inverted: false,
animated: false,
ease: "ease-out",
time: 0.3
});

/* INCLUDE A SECOND TIME TO ENABLE A BOTTOM EDGE IN ADDITION TO THE TOP */
RsPolyfoldAddOn(tpj, slider, {
position: "bottom",
color: "#ffffff",
scroll: true,
height: 100,
range: "slider",
point: "sides",
placement: 1,
responsive: true,
negative: false,
leftWidth: 0.5,
rightWidth: 0.5,
inverted: false,
animated: false,
ease: "ease-out",
time: 0.3
});

Settings Descriptions:

position
  • "top"
  • "bottom"
Apply an edge to the top or bottom of the slider
color
    Set this to the same color as your web page's main content container's background color
    scroll
    • true
    • false
    Apply the edges when the slider scrolls into and out of view, or apply the edges by default
    height
    • Number
    The default height for the edges
    range
    • "slider"
    • "window"
    Calculate angles based on the Slider's position within the window compared to the overall Slider height or the overall Window height
    point
    • "sides"
    • "center"
    The starting point from where the drawing begins
    placement
    • 1
    • 2
    • 3
    z-index positioning for where the edges should be drawn. Enter the number 1 for "Above Entire Slider", 2 for "Behind Navigation", and 3 for "Behind Static Layers"
    responsive
    • true
    • false
    Dynamically adjust the Polyfold Height as the slider is resized.
    negative
    • true
    • false
    Draw the edges in the opposite direction
    leftWidth
    • Number (0-1)
    How long the left edge should span across the slider (0-100%)
    rightWidth
    • Number (0-1)
    How long the right edge should span across the slider (0-100%)
    inverted
    • true
    • false
    Reverse the drawing as the page is scrolled
    animated
    • true
    • false
    Animate the edges as the page is scrolled
    ease
    • "ease-out"
    • "ease-in"
    • "ease-in-out"
    • "ease"
    • "linear"
    The transition timing equation
    time
    • Number
    The animation time in seconds (a number between 0.3-1.0 is recommended)


    RsPolyfoldAddOn(tpj, slider, {

    position: "top",
    color: "#ffffff",
    scroll: true,
    height: 100,
    range: "slider",
    point: "sides",
    placement: 1,
    responsive: true,
    negative: false,
    leftWidth: 0.5,
    rightWidth: 0.5,
    inverted: false,
    animated: false,
    ease: "ease-out",
    time: 0.3

    });

    Popular Solutions

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