Layers

08.25.2015Krisztian

Layer Basics

Every element added to Slide (between a unsorted List element “li” tag) can be a layer in case the Element has the class tp-caption class added.

Simple HTML Content. Any valid HTML5 Markup can be added, in any depth
Video/Audio Layer
Image Layer
Shape Layer
Button Layer

Slider Revolution can handle different Layer Types:
These Layers will be Resized, Animated, Styled, positioned, looped, triggered and watched by methods and events due Revolution Slider.

Any markup without the tp-caption class within the Slides will be simple drawn as it is, without further actions made by the Plugin.

Layer Markup

A Layer has many data attributes, some of those are compulsary, some of those are optional. We are going to show you all possible data values in the next articles. Based on Layer Type, Responsive behavior, Actions etc. this can be very complex.

To understand better how the layers are handled we advise to study our examples (sorted by themes and layouts) and at the start copy and edit those examples to see the effects of your changes.

In the following example you can see a simple HTML Layer with the most important data attributes:

<div class=”tp-caption maincaption”
data-x=”center” data-hoffset=”0″
data-y=”top” data-voffset=”0″
data-transform_idle=”o:1;”
data-transform_in=”y:50px;opacity:0;s:700;e:Power3.easeOut;”
data-transform_out=”y:50px;opacity:0;s:500;e:Power2.easeInOut;
data-start=”1000″>But a new way to deliver ideas.
</div>

Layer Settings Overview

data-x Type:String
Value:"left","center","right"

The Horizontal Layer position within the Layer Grid Container (horizontal align). In case data-basealign=”slide” is set, the layer will be aligned based on the Slide container and not the Layer Grid Container.

In case you set a direct Number like data-x=”200″ the element will be left aligned and the distance will be automatically 200px away from the left side of the LGC / Slide.

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[‘left’,’left’,’center’,right’]” to set the layer left on desktop and notebook, center on Tablet devices, and right positioned on Mobile.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-y Type:String
Value:"top","center","bottom"

The Vertical Layer position within the Layer Grid Container (vertical align). In case data-basealign=”slide” is set, the layer will be aligned based on the Slide container and not the Layer Grid Container.

In case you set a direct Number like data-y=”200″ the element will be top aligned and the distance will be automatically 200px away from the top side of the LGC / Slide.

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[‘top’,’top’,’center’,bottom’]” to set layer top aligned on desktop and notebook, center on Tablet devices, bottom on Mobile.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-hoffset Type:Integer
Value:px

Defines the Offset horizontally from the Layer position set via the data-x.
i.e. data-x=”center” data-hoffset=”50″ will put the Layer center + 50px within the Layer Grid Container / Slide (based on the data-basealign setting).

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[50,50,30,10]” to set layer 50px away from the Layer position defined in data-x on desktop and notebook, and 30px and 10px on Tablet and mobile devices.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-voffset Type:Integer
Value:px

Defines the Offset vertically from the Layer position set via the data-y.
i.e. data-y=”center” data-voffset=”-50″ will put the Layer center – 50px within the Layer Grid Container / Slide (based on the data-basealign setting).

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[50,50,30,10]” to set layer 50px away from the Layer position defined in data-y on desktop and notebook, and 30px and 10px on Tablet and mobile devices.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-width Type:String
Value:px, "none", "auto", array

The Width of the layer. Set to “none” or “auto” to auto calculate the layer width. Setting the layer width to a predefined value i.e. “175px” will set the layer basic width to this value and calculate all further responsive behavior based on this value. (i.e. auto Line break can be set if width is defined).

“full” – will make the layer full width due the whole Layer Grid or Slider (based on the basealign settings).

This will not set the width of the Included Images. They need to be set independent from this value !

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[‘none’,’none’,’150px’,’100px’]” which will i.e. use on Desktop and Notebook auto Width, and on Tablet and Mobile predefined widths.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-height Type:String
Value:px, "none", "auto", array

The Height of the layer. Set to “none” or “auto” to auto calculate the layer height. Setting the layer height to a predefined value i.e. “175px” will set the layer basic height to this value and calculate all further responsive behavior based on this value.

“full” – will make the layer full height due the whole Layer Grid or Slider (based on the basealign settings).

This will not set the height of the Included Images. They need to be set independent from this value !

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[‘none’,’none’,’150px’,’100px’]” which will i.e. use on Desktop and Notebook auto Height, and on Tablet and Mobile predefined heights.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-whitesapce Type:String
Value:"normal","nowrap","pre"

Defines the way how the line should break based on the width and height settings of the Layer.

nowrap – will not auto break the line. Text will overflow the container if it has set smaller (not auto or none).
normal – content will auto line break based on the layer width

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

“[‘nowrap’,’normal’,’normal’,’normal’]” to not autobreak on Desktop, but auto break on Notebook, Tablet and Mobile.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-lineheight Type:Array
Value:['int','int','int','int']

Set this only use if you wish to have different Line Heights on different Devices.

Must be defined as an Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices.

“[’40’,’30’,’30’,’25’]” to set Line Height of the Layer to 40px on Desktop, 30px on Notebook and Tablet, and 25px on Mobile.

Note!! Only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-fontsize Type:Array
Value:['int','int','int','int']

Set this only if you wish to have different Font Sizes on different Devices.

Must be defined as an Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices.

“[’40’,’30’,’30’,’25’]” to set the Font Size of the Layer to 40px on Desktop, 30px on Notebook and Tablet, and 25px on Mobile.

Note!! Only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-fontweight Type:Array
Value:each value can be 900,800,700,6005,500,400,300

Set this only if you wish to have different Font Weight on different Devices.

Must be defined as an Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices.

“[‘400′,’500′,’600′,’300’]” to set the Font Weight of the Layer to 400 on Desktop, 500 on Notebook, 600 on Tablet, and 300 on Mobile.

Note!! Only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-color Type:Array
Value:['color','color','color','color']

Set this only if you wish to have different Colors on different Devices.

Must be defined as an Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices.

“[‘rgba(255,255,255,0.1)’,’#ff0000′,’rgb(100,100,100)’,’#00ff00′]” to set the color of the Layer to Red with Opacity 0.1 on Desktop, red on Notebook, gray on Tablet, and green on Mobile.

Note!! Only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

data-basealign Type:String
Value:"slide","grid"

Defines if the Layer should be aligned to the Layer Grid container, or to the Slide.

slide – if the Slider is in FullWidth or FullSceen mode, and data-x=”left” data-y=”top” set, the Layer will be in the very top left corner positioned in the Slider, independent of the Layer Grid Size.

grid – if the Slider is in FullWidth or FullSceen mode, and data-x=”left” data-y=”top” set, the Layer will be positioned within the Layer Grid Size, which is centered within the Slider. See Following examples !

data-responsive_offset Type:String
Value:"on","off"

Defines how offset values (hoffset,voffset) should act on responsivity.

“on” – offsets are responsive, positions and distances recalculated based on the other settings

“off” – offsets are fixed on any window size. Used i.e. to add a layer 10px from top left corner, where 10px offset will stay on any window size.

Further Settings for like :

transform_idle
transform_in
transform_out
transform_hover
discusses later below in the Layer Transition section.

Layer Type/Source

HTML

Any Html Content can be added to the Layer.

Function Classes

tp-caption – Compulsory ! The Layer Definition class in Revslider. Without this class the content will be untouched by the Slider.

tp-resizeme – rekursive resize any elements within the layer.

Further Layer Styling Classes can be found in the revolution/css/layers.css file.

<div class=”tp-caption tp-resizeme furtherclasses”
id=”layer-id”
data-x=”center” data-hoffset=”0″
data-y=”center” data-voffset=”0″
data-width=”none”
data-height=”none”
data-whitespace=”nowrap”
data-transform_idle=”o:1;”
data-transform_in=”opacity:0;s:300;e:Power2.easeInOut;”
data-transform_out=”opacity:0;s:300;s:300;”
data-start=”500″
data-splitin=”none”
data-splitout=”none”
data-responsive_offset=”on”
style=”z-index: 5;”>Why not write <strong>HTML</strong> here?
</div>

Further inline styling are allowed for the html layer (via the style=”” attribute.)

Note !! In some Advanced Responsive cases, font-size, font-weight, color, line height is overwritten due data attributes (see Layer Settings for further information). Also, Hover Animations defined via the transition_hover and hover_style will overwrite :hover defined styles.

See all Basic Layer Settings here: https://www.themepunch.com/revsliderjquery-doc/layers/#layersettings

Image

The Layer Image is defined via an image tag within the tp-caption div.

Function Classes

tp-caption – Compulsory ! The Layer Definition class in Revslider. Without this class the content will be untouched by the Slider.

tp-resizeme – rekursive resize any elements within the layer.

A typical Image Layer could be added like follows:

<!– LAYER NR. 1 –>
<div class=”tp-caption tp-resizeme furtherclasses”
id=”layer-id”
data-x=”center” data-hoffset=”0″
data-y=”center” data-voffset=”0″
data-width=”none”
data-height=”none”
data-whitespace=”nowrap”
data-transform_idle=”o:1;”
data-transform_in=”opacity:0;s:300;e:Power2.easeInOut;”
data-transform_out=”opacity:0;s:300;s:300;”
data-start=”500″
data-splitin=”none”
data-splitout=”none”
data-responsive_offset=”on”
style=”z-index: 5;”>
<img src=”image.png” alt=””
width=”302″ height=”152″
data-ww=”302px” data-hh=”152px” data-no-retina>
</div>

See all Basic Layer Settings here: https://www.themepunch.com/revsliderjquery-doc/layers/#layersettings

The image Tag can have different Sizes per Device. To help the preloader and to define the differrent sizes on different devices, you can use the data-ww and data-hh attributes.

data-ww Type:Array or single String
Value:"['302px','250px','300px','200px']"

Defines the Width of the image. (can distort and scale the image if dimensions are different than original dimensions).

data-ww will define the Default Width of the Layer Image. Can be a single value or an Array.

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

data-ww=”[‘302px’,’280px’,’270px’,’300px’]” to set the image width 302px on Desktop, 280px on Notebook, 270px on Tablet and 300px on Mobile again.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

Note!! The img width=”302px” height=”152px” attributes are only for SEO and Valide HTML Markups, those values will be ignored in the Slider !

data-hh Type:Array or single String
Value:"['302px','250px','300px','200px']"

Defines the Height of the image. (can distort and scale the image if dimensions are different than original dimensions).

data-hh will define the Default Height of the Layer Image. Can be single value or Array.

Use Array for Advanced Responsive Levels to set different values on Desktop,Notebook,Tablet and Mobile Devices. i.e.:

data-hh=”[‘302px’,’280px’,’270px’,’300px’]” to set the image height 302px on Desktop, 280px on Notebook, 270px on Tablet and 300px on Mobile again.

Note!! Array is only works if responsivelevels and gridwidth/gridheight is defined as arrays in the Slider Settings !

Note!! The img width=”302px” height=”152px” attributes are only for SEO and Valide HTML Markups, those values will be ignored in the Slider !

Video/Audio

Slider Revolution can handle following Video Sources out of box:

HTML5 Video/Audio
Vimeo Video
YouTube Video

The supported video Types can be controlled due Slide and Layer Actions. Methods like autoplay, rewind, pause, mute, loop, speed, volume, from – till, cover, etc. functions are available due the Video API’s.

Also other Video Streams can be added as HTML Layer. However at 3thd party video players (except the 3 Types above) you will need to build your own control management.

Function Classes

tp-caption – Compulsory ! The Layer Definition class in Revslider. Without this class the content will be untouched by the Slider.

tp-resizeme – rekursive resize any elements within the layer.

tp-audiolayer – Use this class for Audio Files. Will create HTML5 Audio Markup.

tp-hiddenaudio – Hide the Audio Layer. It will play the Audio without showing the layer at all.

fullscreenvideo – Sets the Video to fill the whole Slider part. It will not fill with “contain”. Depending on Aspect Ratios of Slider and Video, black placeholder can be added above/below the video. To set the video to “cover” please use the data-forceCover=”1″ attribute also.

<div class=”tp-caption tp-resizeme fullscreenvideo tp-videoplayer”
id=”layer-id”
data-x=”center” data-hoffset=”0″
data-y=”center” data-voffset=”0″
data-width=”none”
data-height=”none”
data-whitespace=”nowrap”
data-transform_idle=”o:1;”
data-transform_in=”opacity:0;s:300;e:Power2.easeInOut;”
data-transform_out=”opacity:0;s:300;s:300;”
data-start=”500″
data-splitin=”none”
data-splitout=”none”
data-responsive_offset=”on”

data-ytid=”T8–OggjJKQ”
data-videoattributes=”version=3&amp;enablejsapi=1&amp; html5=1&amp;volume=100&hd=1& wmode=opaque&showinfo=0&ref=0;&start=15&end=45; origin=https://yourdomain;”
data-videorate=”1.5″
data-videowidth=”100%”
data-videoheight=”100%”
data-videocontrols=”controls”
data-videoloop=”none”
data-autoplay=”on”
data-nextslideatend=”true”
data-videoposter=”https://img.youtube.com/vi/T8–OggjJKQ/sddefault.jpg”
data-posterOnMObile=”off”
data-volume=”100″
data-stopallvideos=”true”
data-forcerewind=”on”
data-videostartat=”0:15″
data-videoendat=”0:45″
data-showcoveronpause=”on”

style=”z-index: 5;”>

</div>

<div class=”tp-caption tp-resizeme fullscreenvideo tp-videoplayer”

id=”layer-id”

data-x=”center” data-hoffset=”0″

data-y=”center” data-voffset=”0″

data-width=”none”

data-height=”none”

data-whitespace=”nowrap”

data-transform_idle=”o:1;”

data-transform_in=”opacity:0;s:300;e:Power2.easeInOut;”

data-transform_out=”opacity:0;s:300;s:300;”

data-start=”500″

data-splitin=”none”

data-splitout=”none”

data-responsive_offset=”on”

data-ytid=”T8–OggjJKQ”

data-videoattributes=”version=3&enablejsapi=1& html5=1&volume=100&hd=1& wmode=opaque&showinfo=0&ref=0;&start=15&end=45; origin=http://yourdomain;”

data-videorate=”1.5″

data-videowidth=”100%”

data-videoheight=”100%”

data-videocontrols=”controls”

data-videoloop=”none”

data-autoplay=”on”

data-nextslideatend=”true”

data-videoposter=”https://img.youtube.com/vi/T8–OggjJKQ/sddefault.jpg”

data-posterOnMObile=”off”

data-volume=”100″

data-stopallvideos=”true”

data-forcerewind=”on”

data-videostartat=”0:15″

data-videoendat=”0:45″

data-showcoveronpause=”on”

style=”z-index: 5;”>

</div>

See all Basic Layer Settings here: https://www.themepunch.com/revsliderjquery-doc/layers/#layersettings

Further Video Layer Settings:

data-forcerewind Type:String
Value:0-100, "mute"

It rewinds the video to the start position (which is set via the data-videostartat parameter).

data-volume Type:String
Value:0-100, "mute"

Sets the Start Volume of the Video. It is advised to set Main Background Video volumes to “mute”. 100 is the max. Volume.

data-videorate Type:Float
Value:"0.1".."0.5".."1".."1.5"...

The Speed of the Video. Only available for YouTube Videos. 1 is Normal Speed, 2 half slow, 0.5 is double quick, etc..

data-videowidth/data-videoheight Type:Size (px,%)
Value:"100%"

The Video Width and Height. For FullScreen Cover and Contain mode please set the Background videos always to 100% width and height.

data-videocontrols Type:String
Value:"none","controls"

Enable / Disable the control panel of the Video. Will be ignored bei Vimeo, where Controls can not be disabled. We advise to set this to “none” when you use videos as Main Background videos. Update ! Vimeo Video will also hide Controls now in case you add into the Video Arguments the background=1 Attribute.

data-videostartat Type:Time
Value:"00:00"

At which sec. the video should start. (Also force rewind will rewind the video back to this position). 00:05 means start at the 5th sec. An exact position is not always possible. The next best frame will be picked around the defined time position.

data-videoendat Type:Time
Value:"00:00"

At which sec. the video should stop. All defined events will be triggered once the video reached this position (like next slide on end, loop, rewind, etc..) 00:05 means end at the 5th sec. An exact position is not always possible. The next best frame will be picked around the defined time position. Dont define this value in case you dont want a different end than the real length of the video.

data-videoloop Type:String
Value:"loop","loopandnoslidestop",""

Defines if the Video should loop once the end has been reached (end can be defined also via data-videoendat).

If not defined, the video will play only once, and the timer of slider will cont to count down again, and/or further events will be triggered

If value is “loop” the video will loop and stop also the Slider Timer. Slide will stay in position, and will only go to next slide on user action.

if value set to “loopandnoslidestop” the video will loop during the slide timer continues to count down. If the video is shorter, (i.e. data-videostartat and video-endat defined a shorter range) the video will loop till the end of the slide has been reached.

data-autoplay Type:String
Value:"on","1sttime","no1sttime","off"

Defines if the Video should play at start.

“on” – Video starts always when Slide becomes in Focus and Layer starts to animate in.

“off” – Video never start automatically.

“1sttime” – Video starts automatically first time. After Slide animated out, video will never start play automatically

“no1sttime” – Video stay in pause when 1st time slide animates in. Every following loop, when Slide and Layer becomes in focus, the Video will start automatically.

data-forceCover Type:Integer
Value:"1"

If value is set (to “1”) the video will always cover the slider dimensions. Means it will be zoomed to have a spaceless video covering the full slider aligned to the center center position.

data-aspectratio Type:String
Value:"4:3","16:9"

The aspect ratio of the Video. It helps to pre size the video before the Meta has been read.

data-nextslideatend Type:Boolean
Value:"true","false"

Auto call next slide when video reached the End time or in data-videoendat parameter defined time position. It will ignore Slide Countdown process, and only works if Loop not set to Video.

data-ytid Type:String
Value:"T8--OggjJKQ"

Defines the YouTube Video ID. Please define only one of the following possibilities per Video:

data-ytid OR
data-vimeoid OR
data-videomp4

data-vimeoid Type:String
Value:"30300114"

Defines the Vimeo Video ID. Please define only one of the following possibilities per Video:

data-ytid OR
data-vimeoid OR
data-videomp4

data-videomp4 / data-videowebm / data-videoogv Type:Url
Value:HTML 5 Video URL

Defines the HTML5 Video / Audio Source file. Can be defined videomp4, audiomp4, videowebm and videogv in the same time to fall back on different browsers if needed. Please define only one of the following possibilities per Video:

data-ytid OR
data-vimeoid OR
data-videomp4 and or data-videowebm andor data-videoogv

!Important! For Audio Files please use the data-audio=”html5″ attribute also !

data-videoattributes Type:String
Value:Video Attributes

Define for Vimeo or YouTube Videos further Arguments.

i.e: YouTube Video Arguments:
data-videoattributes=”version=3&enablejsapi=1&html5=1& hd=1& wmode=opaque&showinfo=0&ref=0;; origin=https://server.local;”

Vimeo Video Arguments:

data-videoattributes=”title=0&byline=0&portrait=0&api=1″

data-videoposter Type:String
Value:Image URL

The Url for the Cover Image of the Video. This image will be shown when Video is not in Play mode.

data-posterOnMObile Type:String
Value:"on","off"

If value set to “on”, the video will be removed on Mobile Devices, and only the Cover Image will be shown.

data-stopallvideos Type:Boolean
Value:"true","false"

If value set to “true” it will Stop all playing videos within the slider when current video starts to play.

data-showcoveronpause Type:String
Value:"on","off"

If value set to “on” it will show the data-videoposter defined Cover image over the video layer when Video is paused.

Shape

A Shape is a html drawen rectangle.

Function Classes

tp-caption – Compulsory ! The Layer Definition class in Revslider. Without this class the content will be untouched by the Slider.

tp-resizeme – rekursive resize any elements within the layer.

tp-shape – defines that the layer is a shape for special handling.

tp-shapewrapper – defines that the shape can have Paddings (in case the layer is stretched to the full slider)

To define a Shape, you will need to use the function classes tp-shape and tp-shapewrapper as shown in our example:

<!-- LAYER SHAPE -->
<div class="tp-caption tp-shape tp-shapewrapper  tp-resizeme" 

	 id="shape-layer-id" 
	 data-x="left" 
	 data-hoffset="200" 
	 data-y="top" 
	 data-voffset="200" 
	 data-width="200"
	 data-height="200"
	 data-whitespace="nowrap"
	 data-transform_idle="o:1;"
	 data-style_hover="cursor:pointer;"
	 data-transform_in="opacity:0;s:300;e:Power2.easeInOut;" 
	 data-transform_out="opacity:0;s:300;s:300;"
	 data-start="500"
	 data-responsive_offset="on" 

	 style="z-index: 9;
	 	background-color:rgba(186, 186, 186, 1.00);
	 	border-color:rgba(145, 145, 145, 0.50);
	 	border-style:solid;
	 	border-width:2px;
	 	border-radius:30px 30px 30px 30px;">		
</div>

<div class="tp-caption tp-shape tp-shapewrapper tp-resizeme"

id="shape-layer-id"

data-x="left"

data-hoffset="200"

data-y="top"

data-voffset="200"

data-width="200"

data-height="200"

data-whitespace="nowrap"

data-transform_idle="o:1;"

data-style_hover="cursor:pointer;"

data-transform_in="opacity:0;s:300;e:Power2.easeInOut;"

data-transform_out="opacity:0;s:300;s:300;"

data-start="500"

data-responsive_offset="on"

style="z-index: 9;

background-color:rgba(186, 186, 186, 1.00);

border-color:rgba(145, 145, 145, 0.50);

border-style:solid;

border-width:2px;

border-radius:30px 30px 30px 30px;">

</div>

Button

A button is a normal HTML Layer, where we added some pre styled example in our layers.css and settings.css files.

Function Classes

tp-caption – Compulsory ! The Layer Definition class in Revslider. Without this class the content will be untouched by the Slider.

tp-resizeme – rekursive resize any elements within the layer.

PreStyled Button Classes

rev-btn
rev-withicon
rev-hiddenicon
rev-medium
rev-small
rev-maxround
rev-minround
rev-burger
rev-scroll-btn
rev-control-btn
rev-cbutton-dark
…

We prepared an example sheet in the Download package which shows all BTN Types with all fitting markups. Please look for button-examples.

A Typical Burger Button could be defined as shown here:

<div class="tp-caption rev-burger revb-darkfull " 
   id="slide-414-layer-8" 
   data-x="['left','left','left','left']" 
   data-hoffset="['100','100','100','100']" 
   data-y="['top','top','top','top']" 
   data-voffset="['100','100','100','100']" 
   data-width="60"
   data-height="60"
   data-whitespace="nowrap"
   data-transform_idle="o:1;"
   data-style_hover="cursor:pointer;"
   data-transform_in="opacity:0;s:300;e:Power2.easeInOut;" 
   data-transform_out="opacity:0;s:300;s:300;" 
   data-start="500" 
   data-splitin="none" 
   data-splitout="none" 
   data-actions='[{"event":"click",
                   "action":"toggleclass",
                   "layer":"slide-414-layer-8",
                   "delay":"0",
                   "classname":"open"}]'
   data-responsive_offset="on" 
   data-responsive="off"

   style="z-index: 8; min-width: 60px; max-width: 60px; 
          max-width: 60px; max-width: 60px; 
          white-space: nowrap;  
          font-weight: 900;
          background-color:rgba(51, 51, 51, 1.00);
          padding:22px 0px 0px 14px;
          border-color:rgba(68, 68, 68, 1.00);
          border-radius:50% 50% 50% 50%;box-sizing:border-box;"
   >
      <span></span>
      <span></span>
      <span></span>
</div>

<div class="tp-caption rev-burger revb-darkfull "

id="slide-414-layer-8"

data-x="['left','left','left','left']"

data-hoffset="['100','100','100','100']"

data-y="['top','top','top','top']"

data-voffset="['100','100','100','100']"

data-width="60"

data-height="60"

data-whitespace="nowrap"

data-transform_idle="o:1;"

data-style_hover="cursor:pointer;"

data-transform_in="opacity:0;s:300;e:Power2.easeInOut;"

data-transform_out="opacity:0;s:300;s:300;"

data-start="500"

data-splitin="none"

data-splitout="none"

data-actions='[{"event":"click",

"action":"toggleclass",

"layer":"slide-414-layer-8",

"delay":"0",

"classname":"open"}]'

data-responsive_offset="on"

data-responsive="off"

style="z-index: 8; min-width: 60px; max-width: 60px;

max-width: 60px; max-width: 60px;

white-space: nowrap;

font-weight: 900;

background-color:rgba(51, 51, 51, 1.00);

padding:22px 0px 0px 14px;

border-color:rgba(68, 68, 68, 1.00);

border-radius:50% 50% 50% 50%;box-sizing:border-box;"

</div>

Static Layers

Layers are default Slide dependent, and only available due the Slide where the Layer was added. Due the Static Layers Wrapper you can add Layers to show permanent over more than one Slide.

Static Layers are always overlaying the Slides and Layers added within the Slides. Means buttons, links, etc. will may not be available for click, hover or other actions during Static Layers are shown.

Static Layers are just like Normal Layers discussed above. They have the same Transitions, Settings, Actions as traditional Layers with two further data attributes:

<div class="tp-static-layers">
	<div class="tp-caption tp-static-layer" 
		id="slide-37-layer-2" 
		data-x="left" data-hoffset="30" 
		data-y="top" data-voffset="30" 	
		data-whitespace="nowrap"
		data-transform_idle="o:1;"	
		data-transform_in="opacity:0;s:1500;e:Power3.easeInOut;" 
		data-transform_out="auto:auto;s:300;" 
		data-start="500" 
		data-basealign="slide" 
		data-startslide="0" 
		data-endslide="5" 
		style="z-index: 5;">Some Static Layer
	</div>
</div>

<div class="tp-caption tp-static-layer"

id="slide-37-layer-2"

data-x="left" data-hoffset="30"

data-y="top" data-voffset="30"

data-whitespace="nowrap"

data-transform_idle="o:1;"

data-transform_in="opacity:0;s:1500;e:Power3.easeInOut;"

data-transform_out="auto:auto;s:300;"

data-start="500"

data-basealign="slide"

data-startslide="0"

data-endslide="5"

style="z-index: 5;">Some Static Layer

</div>

Static Layers should be defined via the div tag with the tp-static-layers class, which must follow the ul (unsorted List) of Slides.

Each Static Layer must have the class tp-static-layer class for further identifications and referencing.

data-startslide Type:Integer
Value:Slide Index

The Index of the Slide where the Static Layer should be shown first. (0 = First Slide). The In Animation will be started on this Slide at the data-start attribute defined Timepoint.

data-endslide Type:Integer
Value:Slide Index

The Index of the Slide where the Static Layer should be shown last. The Out Animation will be started on this Slide at the data-end attribute defined Timepoint.

Parallax Layer Effect

You can define parallax effects on the Layer via the class rs-parallaxlevel-x added to the same level where the tp-caption class defined.

The parallax behavior is defined due the Slider Options where you can define an array of Parallax strengths and directions, dependencies.

To set main Settings of the slider, please take a look on the Capital Parallax.

i.e.:

<div class="tp-caption rs-parallaxlevel-0"
	data-x="right" 
	data-hoffset="100" 
	data-y="top" 
	data-voffset="100" 
	data-width="none"
	data-height="none"
	data-whitespace="nowrap"
	data-transform_idle="o:1;""
	data-transform_in="x:[-100%];opacity:0;s:2500" 
	data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;" 
	data-start="500" 
	data-splitin="none" 
	data-splitout="none" 	
	style="z-index: 13">See Usage Examples 
</div>

<div class="tp-caption rs-parallaxlevel-0"

data-x="right"

data-hoffset="100"

data-y="top"

data-voffset="100"

data-width="none"

data-height="none"

data-whitespace="nowrap"

data-transform_idle="o:1;""

data-transform_in="x:[-100%];opacity:0;s:2500"

data-transform_out="auto:auto;s:1000;e:Power2.easeInOut;"

data-start="500"

data-splitin="none"

data-splitout="none"

style="z-index: 13">See Usage Examples

</div>

Back

Layers

Contents

Layer Basics

Layer Markup

Layer Settings Overview

Layer Type/Source

HTML

Image

Video/Audio

Shape

Button

Static Layers

Parallax Layer Effect