Wavy Colour Banner Animation

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