Using the Example Definitions

If You’re Using HTML Markup…

Pick an example and copy the definition with the “Copy HTML markup” button. This will copy the banner definition in a format that can be used in regular HTML.

Edit your HTML file and go to the element that you want to create a banner for. Inside the element’s opening tag, paste the markup you’ve copied, so you get something like this:

<div data-wavy-colour-banner="{&quot;primaryColour&quot;:&quot;white&quot;,&quot;slideIntro&quot;:{&quot;isEnabled&quot;:true,&quot;duration&quot;:4000},&quot;fadeIntro&quot;:{&quot;isEnabled&quot;:true,&quot;duration&quot;:4000},&quot;layers&quot;:[{&quot;speed&quot;:0.1,&quot;opacityTop&quot;:&quot;50%&quot;},{&quot;verticalOffset&quot;:360,&quot;opacityTop&quot;:&quot;25%&quot;,&quot;amplitude&quot;:40,&quot;speed&quot;:0.1,&quot;phaseMultiplier&quot;:1.1},{&quot;verticalOffset&quot;:370,&quot;opacityTop&quot;:&quot;25%&quot;,&quot;amplitude&quot;:20,&quot;speed&quot;:0.105,&quot;phaseMultiplier&quot;:1},{&quot;verticalOffset&quot;:360,&quot;opacityTop&quot;:&quot;15%&quot;,&quot;amplitude&quot;:24,&quot;speed&quot;:0.11,&quot;phaseMultiplier&quot;:0.9},{&quot;verticalOffset&quot;:340,&quot;opacityTop&quot;:&quot;15%&quot;,&quot;amplitude&quot;:40,&quot;speed&quot;:0.115,&quot;phaseMultiplier&quot;:0.8},{&quot;verticalOffset&quot;:350,&quot;opacityTop&quot;:&quot;15%&quot;,&quot;amplitude&quot;:50,&quot;speed&quot;:0.12,&quot;phaseMultiplier&quot;:0.7},{&quot;verticalOffset&quot;:355,&quot;opacityTop&quot;:&quot;15%&quot;,&quot;amplitude&quot;:40,&quot;speed&quot;:0.125,&quot;phaseMultiplier&quot;:0.65},{&quot;verticalOffset&quot;:380,&quot;opacityTop&quot;:&quot;15%&quot;,&quot;amplitude&quot;:20,&quot;speed&quot;:0.13,&quot;phaseMultiplier&quot;:0.6},{&quot;verticalOffset&quot;:375,&quot;opacityTop&quot;:&quot;35%&quot;,&quot;amplitude&quot;:20,&quot;speed&quot;:0.2,&quot;phaseMultiplier&quot;:0.5}]}">
    <p>Lorem ipsum dolor sit amet. Labore id adipiscing Duis.</p>
</div>

The banner definition is difficult to read because it’s been “escaped” so that all the double-quote characters have been turned into the &quot; entity.

Browse the HTML Markup Docs

If You’re Using JavaScript…

Pick an example and copy the definition with the “Copy JavaScript” button. This will put the banner definition in your clipboard as a big string. Edit your HTML and go to the script element where you’re creating your banner(s). Create a new const to hold your definition and paste the definition into it, so it looks like this:

<!-- Load Wavy Colour Banner -->
<script src="wavy-colour-banner.js"></script>

<!-- Initialise Out Wavy Colour Banner -->
<script type="text/javascript">
	// Example Wavy Colour Banner from https://wavy-banner.net/
    const bannerDefinition = {
        "primaryColour": "turquoise",
        "slideIntro": {
            "isEnabled": false,
            "duration": 4000
        },
        "fadeIntro": {
            "isEnabled": false,
            "duration": 4000
        },
        "layers": [{
                "colourTop": "blue",
                "colourBottom": "blue",
                "verticalOffset": 360,
                "amplitude": 25,
                "speed": 0.2,
                "phaseMultiplier": 0.2
            },
            {
                "colourTop": "blue",
                "colourBottom": "blue",
                "verticalOffset": 360,
                "amplitude": 30,
                "speed": 0.25,
                "phaseMultiplier": 0.25
            },
            {
                "colourTop": "blue",
                "colourBottom": "blue",
                "verticalOffset": 360,
                "amplitude": 40,
                "speed": 0.3,
                "phaseMultiplier": 0.3
            },
            {
                "colourTop": "turquoise",
                "colourBottom": "turquoise",
                "verticalOffset": 360,
                "amplitude": 40,
                "speed": 0.35,
                "phaseMultiplier": 0.35
            },
            {
                "verticalOffset": 360,
                "amplitude": 40,
                "speed": 0.4,
                "phaseMultiplier": 0.4
            },
            {
                "verticalOffset": 360,
                "amplitude": 40,
                "speed": 0.45,
                "phaseMultiplier": 0.45
            },
            {
                "verticalOffset": 360,
                "amplitude": 40,
                "speed": 0.5,
                "phaseMultiplier": 0.5
            },
            {
                "colourTop": "white",
                "colourBottom": "white",
                "verticalOffset": 360,
                "opacityTop": "100%",
                "opacityBottom": "25%",
                "amplitude": 40,
                "speed": 0.2,
                "phaseMultiplier": 0.45
            }
        ]
    };

    // Create banners for all elements with the "wavy-banner" CSS class
    document.addEventListener("DOMContentLoaded", function() {
        WavyColourBanner.create('.wavy-banner', bannerDefinition);
    });
</script>

The code is simple. There’s one block at the top that defines our banner in “bannerDefinition”. Then we create a small function that runs after the document has loaded, and it calls WavyColourBanner.create() with our definition, for all the HTML elements with the “wavy-banner” class. You can change the CSS selector from “.wavy-banner” to anything you want, such as “header”, “h1”, “#masthead”, etc.

Browse the JavaScript API Docs