Make sure you’ve loaded the Wavy Colour Banner in the document header.
... <head> ... <!-- Load Wavy Colour Banner --> <script src="wavy-colour-banner.min.js"></script> ... </head> ...
After the Wavy Colour Banner has loaded, you can create banners at runtime by calling WavyColourBanner.create().
// Find all elements with the "banner" CSS class and create default wavy banners for them.
document.addEventListener("DOMContentLoaded", function() {
WavyColourBanner.create('.banner');
});Calling WavyColourBanner.create()
/**
* Create instance(s) of wavy colour banners and start animating.
*
* elementOrSelector (string or element)
* Can be a CSS selector string or a DOM element object.
* If it's a CSS selector string, multiple banners might be created.
* If it's a DOM element, only a single banner will be created.
* Each banner is created and then inserted as the element's first child.
*
* definition (optional, object)
* An optional banner definition object. If it's not specified, the default
* wispy definition is used. If a partial definition is specified then
* missing properties are populated from the default definition.
*
*/
WavyColourBanner.create(elementOrSelector, definition = null) { ... }Example One
After a page has loaded, create some wispy red and blue banners.
document.addEventListener("DOMContentLoaded", function() {
const redBannerDefinition = {
"primaryColour": "red"
};
const blueBannerDefinition = {
"primaryColour": "blue"
};
WavyColourBanner.create('.red-banner', redBannerDefinition);
WavyColourBanner.create('.blue-banner', blueBannerDefinition);
});Example Two
Create a green banner on the #masthead element without fading it in.
document.addEventListener("DOMContentLoaded", function() {
const bannerDefinition = {
"primaryColour": "green",
"fadeIntro": {
"isEnabled": false
},
};
WavyColourBanner.create('#masthead', bannerDefinition);
});Complete Example
A start-to-finish example using the JavaScript API.
Create a file called “wavy-banner.html” and paste the following into it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wavy Colour Banner</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load Wavy Colour Banner -->
<script src="wavy-colour-banner.min.js"></script>
<!-- Initialise Out Wavy Colour Banner -->
<script type="text/javascript">
const bannerDefinition = {
"primaryColour": "white",
"slideIntro": {
"isEnabled": true,
"duration": 4000
},
"fadeIntro": {
"isEnabled": true,
"duration": 4000
},
"layers": [{
"verticalOffset": 360,
"amplitude": 25,
"speed": 0.2,
"phaseMultiplier": 0.2
},
{
"verticalOffset": 360,
"amplitude": 30,
"speed": 0.25,
"phaseMultiplier": 0.25
},
{
"verticalOffset": 360,
"amplitude": 40,
"speed": 0.3,
"phaseMultiplier": 0.3
},
{
"verticalOffset": 360,
"opacityTop": "100%",
"opacityBottom": "25%",
"amplitude": 40,
"speed": 0.2,
"phaseMultiplier": 0.45
}
]
};
document.addEventListener("DOMContentLoaded", function() {
WavyColourBanner.create('header');
});
</script>
<style>
* { box-sizing: border-box; }
html, body {
background-color: blue;
margin: 0;
padding: 0;
}
header { padding: 4rem 0; }
h1, p {
max-width: 30rem;
margin-left: auto;
margin-right: auto;
}
article p { color: white; }
</style>
</head>
<body>
<header>
<h1>Title</h1>
<p>Strapline</p>
</header>
<article>
<p>Lorem ipsum dolor sit amet. Aute enim sit. Ut amet, exercitation nulla nisi et quis. Fugiat voluptate reprehenderit. Aliqua nulla, nisi ipsum esse voluptate sint. Qui cupidatat veniam amet sunt, ut, voluptate eiusmod nisi. Elit ipsum minim veniam, velit sed. Exercitation pariatur ad velit laboris, aliquip, quis pariatur id.</p>
<p>Fugiat incididunt, est ea velit fugiat minim. In Excepteur amet. Nulla aute, incididunt qui aute commodo incididunt. Officia eu sunt consequat cupidatat, occaecat, minim est nisi. Sit velit Duis irure. Exercitation laboris id adipiscing dolor, irure, commodo sint veniam. Ea sit exercitation Ut. Nisi ad esse ullamco sed, in, labore proident laborum. Deserunt culpa sed. Dolore do, nisi minim do id ut.</p>
</article>
</body>
</html>Download the latest version of Wavy Colour Banner, extract it and copy dist/wavy-colour-banner.min.js to the same directory as wavy-banner.html.
Open wavy-banner.html in your browser and it should “just work”.