Layers

Adds support for layers, which are blocks of text or HTML content that can easily be positioned, sized or animated.

Layers have several predefined styles and support various settings, all of which define the layers' look and behavior. The following example shows how to create two basic layers inside a panel. These layers will be static and we won't add any styling to them.

<div class="ga-panel">
    <img class="ga-background" src="path/to/image1.jpg"/>
    <h3 class="ga-layer">
        Lorem ipsum dolor sit amet
    </h3>
    <p class="ga-layer">
        consectetur adipisicing elit
    </p>
</div>

As you can see above, the layers need to have the ga-layer class, but they can be any HTML element: paragraphs, headings or just DIV elements.

Here is an example that adds some styling and animates the layers:

<div class="ga-panel">
    <img class="ga-background" src="path/to/image1.jpg"/>
    <h3 class="ga-layer ga-closed ga-black"
        data-position="bottomLeft" data-horizontal="10%"
        data-show-transition="left" data-show-delay="300" data-hide-transition="right">
        Lorem ipsum dolor sit amet
    </h3>
    <p class="ga-layer ga-opened ga-white ga-padding"
        data-width="200" data-horizontal="center" data-vertical="40%"
        data-show-transition="down" data-hide-transition="up">
        consectetur adipisicing elit
    </p>
</div>

There are several predefined classes that can be passed to layers in order to style them. The position, size and animations are set using data attributes. For a better organization of the HTML code, I added the classes, the attributes that set the position and size, and the attributes that set the animation on separate lines, but you can add them in a single line if you want to.

This is the list of predefined classes that can be passed to the layers:

ga-opened

Sets the layer to be visible only when the panel is opened.

ga-closed

Sets the layer to be visible only when the panel is closed.

ga-black

Adds a black and transparent background and makes the font color white.

ga-white

Adds a white and transparent background and makes the font color black.

ga-padding

Adds a 10 pixel padding to the layer.

ga-rounded

Makes the layer's corners rounded.

In the accordion's CSS file, grid-accordion.css, you can edit the properties specified for the above classes. For example, you can set the padding to 5 pixels instead of 10 pixels, or you can change the transparency of the black and white backgrounds. However, it's a best practice to add your custom styling in a separate CSS file instead of modifying the accordion's CSS.

This is the list of data attributes:

data-width

Sets the width of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's width will adapt to the width of the inner content.

data-height

Sets the height of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's height will adapt to the height of the inner content.

data-depth

Sets the depth (z-index, in CSS terms) of the layer.

data-position

Sets the position of the layer. Can be set to 'topLeft' (which is the default value), 'topRight', 'bottomLeft' or 'bottomRight'.

data-horizontal

Sets the horizontal position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed value, percentage value or to 'center'.

data-vertical

Sets the vertical position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed value, percentage value or to 'center'.

data-show-transition

Sets the transition of the layer when it appears in the panel. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it appears.

data-show-offset

Sets an offset for the position of the layer from which the layer will be animated towards the final position when it appears in the panel. Needs to be set to a fixed value.

data-show-duration

Sets the duration of the show transition.

show-delay

Sets a delay for the show transition. This delay starts from the moment when the panel starts opening.

data-hide-transition

Sets the transition of the layer when it disappears from the panel. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it disappears.

data-hide-offset

Sets an offset for the position of the layer towards which the layer will be animated from the original position when it disappears from the panel. Needs to be set to a fixed value.

data-hide-duration

Sets the duration of the hide transition.

data-hide-delay

Sets a delay for the hide transition. This delay starts from the moment when the panel starts closing.

The layers are animated using CSS3 transitions in most browsers. In IE9 and IE8 (where CSS3 transitions are not supported), the layers will only fade in/out and in IE7 and older, the layers will appear without any animation.

This module is showcased in example1.html and example3.html.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk