Inline template: sticky square

"Sticky square", this is what we call a template which shows up at the corner of the page and remains there despite scrolling, as if it's glued. And usually it's squarish, as it appears to be the most convenient shape to fit all content we need.

Technically, it's a typical inline template simply put into another context: into a fixed-positioned container instead of one among paragraphs. This means that on Piano's end you need a simple template, while on your end we would ask you to add a few lines of CSS code.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

There are 2 ways to set up an inline template: on your end or in Composer.

Make the template sticky

Let's say your container for an inline template has a CSS class .piano-container. The template will render there taking 100% of its width. So you need to specify the container width along with the position on the page. Here is a code example which you can add to your CSS, probably after some tweaking:

.piano-container {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 350px;
}

You can make it emerge smoothly, as if slides in. Then just add some animation:

.piano-container {
  position: fixed;
  right: 40px;
  bottom: 40px;
  width: 350px;
  transform: translateX(500px);
  animation-name: slideLeft;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.05, 0.36, 0.29, 1.1);
  animation-fill-mode: forwards;
}

@keyframes slideLeft {
  from {
    transform: translateX(500px);
  }
  to {
    transform: translateX(0);
  }
}

The animation parameters, such as duration or timing function, can be adjusted. You can also make the template slide up or roll from another corner or fly from above. Anything you want. CSS animations are at your service.

Specifying a template size

Piano's inline templates simply take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template contents. So nothing needs to be defined. Instead, just let the Piano template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.