Slide Parallax

Perfect choice for creating the unusual and stylish before-after effects

Create the amazing effect of two images overlapping each other with a slider to unleash the hidden one.

You may check the module examples here.

Watch the video tutorial on Slide Parallax module creation for more details.

General settings

  • Direction – select the direction to slide the images.
    • Horizontal – the images will be sliding horizontally.
    • Vertical – the images will be sliding vertically.
Extra features
  • Animation – choose between 14 preset animation effects.
  • Custom CSS class – enter our own unique class name for the item – this is a useful option for those who want to create a specific style. E.g.: you can type custom-style class and then go to Theme options General options Custom CSS/JS Custom CSS field and write your own CSS code with this class to get your own style.

Images settings

  • First image – upload the first image for the module.
  • Second image – upload the second image which will change the first one for the module.
Images size
  • Image width – set the width for the images.
  • Image height – set the width for the images.

Divider settings

  • Divider image – upload the image which will be set as the divider between the images.
  • Delimiter width – set the width for the divider between the images.
  • Delimiter color – set the delimiter color for the images. The default color is not set for this element.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(http://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: scroll;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}