Wavy Colour Banner Animation

A colourful, wavy, animated JavaScript banner that can be used in multiple locations, and in multiple styles, on any page.

Wavy Colour Banner plugin on a monitor

Free

SKU: PP-WCB-L12-R00 Category: Current: 1.3.2

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.

Changelog: Wavy Colour Banner

Version 1.3.2

Released: 2022-01-02

  • Minor update.

Version 1.3.1

Released: 2022-01-02

  • Minor update to integrate with the Power Plugins update logic.

Version 1.3.0

Released: 2022-01-01

  • Minor update in preparation for distribution by Power Plugins.

Older releases

  • First public release
  • Old test version
  • Not for public consumption

Using Wavy Colour Banner

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:

  • The banner definition itself
  • How many layers/waves there are
  • How fast the aves move
  • Colours, opacity, etc
  • Which page elements should have banners attached to them.

Download wavy banner definitions from wavy-banner.net

A Note on Themes

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.

Example Wavy Banner Configurations

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.

Example One

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');

Example Two

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');

Example Three

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');

Example Four

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');

Action & Filter Hooks

Filters you can hook in Wavy Colour Banner

FilterParametersNotes
wcb_primary_colour
filter
$colourReturns the default/fall-back HTML colour for the waves, e.g. “red” or “#ff0000”. Default: grey
wcb_enable_slide
filter
$is_enabledIs the slide-down animation enabled. Default: true.
wcb_enable_fade
filter
$is_enabledIs the fade-in animation enabled. Default: true.
wcb_banner_definition
filter
$definitionA array (of arrays) representing the banner’s definition. You can use a JSON definition with json_decode() to return an array.
wcb_selector
filter
$selectorThe DOM element selector to use when creating elements. Default: #masthead.
wcb_is_banner_active
filter
$is_activeWhether or not the banner is enabled. Return false here to disable the banner. Default: true.
Wavy Colour Banner : WordPress filter hooks

Reviews

There are no reviews yet.

Be the first to review “Wavy Colour Banner”