You can define banners in your web projects by applying simple HTML markup to the elements that need banners.
When Wavy Colour Banner has loaded, it scans the page for all elements that have data-wavy-colour-banner specified, and it attaches a banner to them. The following snippet creates a Wispy Wavy Banner with a primary colour of #222 (very dark grey). The banner will be attached to the outer div element as its first child (before the first p element).
<div data-wavy-colour-banner data-wcb-primary-colour="#222" class="demo-banner-dark">
<p>Lorem ipsum dolor sit amet. Aliqua elit ex qui pariatur, exercitation, magna aliqua quis. Qui cillum in sunt, irure nostrud.</p>
<p>Aute eiusmod mollit. Ut ullamco sit in. Excepteur nulla do sed cillum, officia, eu enim pariatur.</p>
</div>HTML Element Attributes
| Attribute | Notes |
|---|---|
| data-wavy-colour-banner Empty or JSON String | This is can be banner definition (JSON), or it can be empty. If no value is specified, then a default banner is created. |
| data-wcb-primary-colour HTML Colour | The main colour of the layers in the wavy banner definition. This colour can be overridden per-layer. It accepts standard HTML colours, such as “red”, “#f00” and “#ff0000”. |
| data-wcb-slide Integer | The duration of the “slide down” animation in milliseconds. If set to zero, the slide animation is disabled. |
| data-wcb-fade Integer | The duration of the “fade in” animation in milliseconds. If set to zero, the fade-in animation is disabled. |
More HTML Markup Examples
Example One
A green wispy banner with no slide-down animation that takes 1 second (1,000ms) to fade in.
<div data-wavy-colour-banner data-wcb-primary-colour="darkgreen" data-wcb-slide="0" data-wcb-fade="1000" class="demo-banner-dark">
<p>Lorem ipsum dolor sit amet. Aliqua elit ex qui pariatur, exercitation, magna aliqua quis. Qui cillum in sunt, irure nostrud.</p>
<p>Aute eiusmod mollit. Ut ullamco sit in. Excepteur nulla do sed cillum, officia, eu enim pariatur.</p>
</div>Example Two
Deep red wispy banner based on the default settings.
<div data-wavy-colour-banner data-wcb-primary-colour="darkred" class="demo-banner-dark">
<p>Lorem ipsum dolor sit amet. Aliqua elit ex qui pariatur, exercitation, magna aliqua quis. Qui cillum in sunt, irure nostrud.</p>
<p>Aute eiusmod mollit. Ut ullamco sit in. Excepteur nulla do sed cillum, officia, eu enim pariatur.</p>
</div>