About Wavy Colour Banner
Colourful wavy animated JavaScript banners. Can be used in multiple locations on any page.
Create animated wavy banners to your site. Easy to extend for developers, or grab a pre-set configuration from wavy-banner.net.
A colourful, wavy, animated JavaScript banner that can be used in multiple locations, and in multiple styles, on any page.
Free
Colourful wavy animated JavaScript banners. Can be used in multiple locations on any page.
Create animated wavy banners to your site. Easy to extend for developers, or grab a pre-set configuration from wavy-banner.net.
Released: 2022-01-02
Released: 2022-01-02
Released: 2022-01-01
After a page has loaded, Wavy Colour Banner (WCB) scans the DOM for elements where id="masthead"
. It then attaches a child element to this and starts to animate it. With just a couple of bits of copy-and-paste code, you can change:
Download wavy banner definitions from wavy-banner.net
If you’re running WP Astra Theme (or a child theme based on it) then WCB uses #masthead .main-header-bar
instead.
If you’re using a theme that does things in a less-than-standard way, you’ll definitely need to change the element selector to make sure the banners are created and attached to the correct elements.
These examples work by hooking Wavy Colour Banner. The snippets can be pasted straight into your child theme’s functions.php.
ImportantTo implement these, you’ll need to be using a WordPress child theme.
A set of purple waves the the fade-in animation disabled.
// Set Wavy Colour Banner's primary colour to purple. function custom_wcb_primary_colour($colour) { return '#823DC2'; } add_filter('wcb_primary_colour', 'custom_wcb_primary_colour'); // Disable Wavy Colour Banner's fade-in animation. add_filter('wcb_enable_fade', '__return_false');
Disable the banner on some WooCommerce pages
// Disable Wavy Colour Banner on some WooCommerce pages function custom_wcb_is_banner_active($is_active) { if (!function_exists('WC')) { // WooCommerce not installed. } elseif (is_cart()) { $is_active = false; } elseif (is_checkout()) { $is_active = false; } else { // Don't change $is_active } return $is_active; } add_filter('wcb_is_banner_active', 'custom_wcb_is_banner_active');
Attach the banner to a different element on the front page.
// Use a different element selector to create banners on the front page. function custom_wcb_selector($selector) { if (is_front_page()) { $selector = '.front-page-banner'; } else { // Use the standard element selector to create Wavy Colour Banners. } return $selector; } add_filter('wcb_selector', 'custom_wcb_selector');
To use the “Electric” banner definition from wavy-banner.net, we need to take the JSON definition and decode it to a PHP array. Just copy the JS version of the definition and decode it with json_decode( 'definition...in...here', true )
. The true
parameters means we want to decide it into an associative array.
// Use the "Electric" definition from https://wavy-banner.net function custom_wcb_banner_definition_electric($definition) { $definition = json_decode('{ "primaryColour": "turquoise", "slideIntro": { "isEnabled": true, "duration": 4000 }, "fadeIntro": { "isEnabled": true, "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 } ] }', true); return $definition; } add_filter('wcb_banner_definition', 'custom_wcb_banner_definition_electric');
Filters you can hook in Wavy Colour Banner
Filter | Parameters | Notes |
---|---|---|
wcb_primary_colour filter | $colour | Returns the default/fall-back HTML colour for the waves, e.g. “red” or “#ff0000”. Default: grey |
wcb_enable_slide filter | $is_enabled | Is the slide-down animation enabled. Default: true . |
wcb_enable_fade filter | $is_enabled | Is the fade-in animation enabled. Default: true . |
wcb_banner_definition filter | $definition | A array (of arrays) representing the banner’s definition. You can use a JSON definition with json_decode() to return an array. |
wcb_selector filter | $selector | The DOM element selector to use when creating elements. Default: #masthead . |
wcb_is_banner_active filter | $is_active | Whether or not the banner is enabled. Return false here to disable the banner. Default: true . |
Reviews
There are no reviews yet.