Polyfold

  • 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.

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

Then initialize the Polyfold Addon:

Settings Descriptions:
  • position"top" "bottom"
    Apply an edge to the top or bottom of the slider
  • colorSet this to the same color as your web page's main content container's background color
  • scrolltrue false
    Apply the edges when the slider scrolls into and out of view, or apply the edges by default
  • heightNumber
    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
  • placement1 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"
  • responsivetrue false
    Dynamically adjust the Polyfold Height as the slider is resized.

  • negativetrue false
    Draw the edges in the opposite direction
  • leftWidthNumber (0-1)
    How long the left edge should span across the slider (0-100%)
  • rightWidthNumber (0-1)
    How long the right edge should span across the slider (0-100%)
  • invertedtrue false
    Reverse the drawing as the page is scrolled
  • animatedtrue false
    Animate the edges as the page is scrolled
  • ease"ease-out" "ease-in" "ease-in-out" "ease" "linear"
    The transition timing equation
  • timeNumber
    The animation time in seconds (a number between 0.3-1.0 is recommended)