app-box

##<app-box>

app-box is a container element that can have scroll effects - visual effects based on scroll position. For example, the parallax effect can be used to move an image at a slower rate than the foreground.

<app-box style="height: 100px;" effects="parallax-background">
  <img background src="picture.png" style="width: 100%; height: 600px;">
</app-box>

Notice the background attribute in the img element; this attribute specifies that that image is used as the background. By adding the background to the light dom, you can compose backgrounds that can change dynamically. Alternatively, the mixin --app-box-background-front-layer allows to style the background. For example:

  .parallaxAppBox {
    --app-box-background-front-layer: {
      background-image: url(picture.png);
    };
  }

Finally, app-box can have content inside. For example:

<app-box effects="parallax-background">
  <h2>Sub title</h2>
</app-box>

Importing the effects

To use the scroll effects, you must explicitly import them in addition to app-box:

<link rel="import" href="/bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">

List of effects

• parallax-background A simple parallax effect that vertically translates the backgrounds based on a fraction of the scroll position. For example:

app-header {
  --app-header-background-front-layer: {
    background-image: url(...);
  };
}

<app-header style="height: 300px;" effects="parallax-background">
  <app-toolbar>App name</app-toolbar>
</app-header>

The fraction determines how far the background moves relative to the scroll position. This value can be assigned via the scalar config value and it is typically a value between 0 and 1 inclusive. If scalar=0, the background doesn't move away from the header.

Styling

Mixin	Description	Default
--app-box-background-front-layer	Applies to the front layer of the background	{}