Skin functions

All skin specific functions are listed here. These functions only work in a skin, hpto or apto for the left.html, right.html and top.html.

For the skin are extra data points available within the object. All skin specific data is stored within the skin property: = {
  site: "", //The site name without any https:// or www.
  skin: {
    offset: 30, //The top offset of the skin 
    topWidth: 1000, // The width of the top
    screenWidth: 1920, //The width of the screen (updated on resize)
    screenHeight: 1080, //The height of the screen (updated on resize)
    skins: true, //A boolean that tells if the skins are shown or not
    sticky: false, //Is the skin sticky true or false
    scrollDepth: 0 //The amount off pixels that is scrolled measured from the top
    skinsLoaded: true //Triggered if all 3 skins trigger onload
    skinsReady: true //Triggered if the readyState of all 3 skins is complete
  width: 640, //The width of the current iframe (can be different per iframe)
  height: 1500 //The height of the current iframe (can be different per iframe)


The PEXI.skinReady function is a callback function that checks if all skin sides are loaded. With these function you can sync timelines over the three sides:

      //Start your timeline, video or wallpaper function


The PEXI.skinsWallpaper() function is a function to easily position a background image over the three different skin sides. To ensure that all sides are loaded it is advisable to call this function within the PEXI.skinReady() function.


      //You can call other functions here

The above functions searches for a .wallpaper div. This div need to be placed within the html within the body, for example:

  <div class="wallpaper"></div>

Need Pexi now? Contact us!