RE: [css3-images] simplifying radial gradients - Spotlight example

Here's a relatively simple example of the kinds of things I expect people to want to use gradients for in the next year or two.  Most of the complexity is due to browser differences such as rules vs. cssRules and the prefixing of gradients.

Ignore the logic related to scenery.  That's just a random backdrop I cobbled together to have a visual behind the effect.

The key function to look at it BuildSpotlight.  Notice that the responsiveness to mouse location only requires updating background image, and only to specify the center of the circle.  No color stops need to be adjusted.  No other CSS properties need to be nudged.

Notes:
(1) I've only (briefly) played with this in FF7 and IE10.  Based on my other sample pages, I expect it works in Chrome and Safari (but I suspect not in Opera).
(2) On my machine it's a bit CPU-intensive in FF7 (even with "Use hardware acceleration when available").  I don't know why and it wasn't intentional.  If there's a simple workaround, private e-mail would be appreciated.

-Brian



<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<style>
	html
	{
		height: 100%;
		background-image: none;
	}
</style>
<script language="JavaScript">
function SetElementText(element,text)
{
	if (document.all) {
		element.innerText = text;
	} else {
		element.textContent = text;
	}
}
function BuildScenery(prefix)
{
	return prefix + "repeating-radial-gradient(75px 100px, red, blue 25px)";
}
function BuildSpotlight(prefix, x, y)
{
	return prefix + "radial-gradient(" + x + "px " + y + "px, circle, transparent 100px, rgba(0, 0, 0, 0.5) 100px, rgba(0, 0, 0, 1) 200px)";
}
function UpdateStyle(backgroundImageValue)
{
	var rules = document.styleSheets[0].rules;
	if (rules == null)
	{
		rules = document.styleSheets[0].cssRules;
	}

	var h0 = document.getElementsByTagName('html')[0];
	var r1 = null;
	if (rules != null)
		r1 = rules[0];

	if (r1)
		r1.style.backgroundImage = backgroundImageValue;
	else
		h0.style.backgroundImage = backgroundImageValue;
}
function UpdateStyleForLocation(prefix, x, y)
{
	var spotlight = BuildSpotlight(prefix, x, y);
	var scenery = BuildScenery(prefix);

	UpdateStyle(spotlight + "," + scenery);
}
function UpdateStyleForEvent(event, prefix)
{
	UpdateStyleForLocation(prefix, event.clientX, event.clientY);
}
function OnMouseMove(event)
{
	UpdateStyleForEvent(event, "-moz-");
	UpdateStyleForEvent(event, "-ms-");
	UpdateStyleForEvent(event, "-o-");
	UpdateStyleForEvent(event, "-webkit-");
	UpdateStyleForEvent(event, "");
}
function OnLoad()
{	UpdateStyle(BuildScenery("-moz-"));
	UpdateStyle(BuildScenery("-ms-"));
	UpdateStyle(BuildScenery("-o-"));
	UpdateStyle(BuildScenery("-webkit-"));
	UpdateStyle(BuildScenery("", document.documentElement.clientWidth, document.documentElement.clientHeight));
	document.onmousemove = OnMouseMove;
}
</script>
</head>
<body onload="OnLoad();">
</body>
</html>

Attachments

Received on Friday, 7 October 2011 19:20:25 UTC