CSS has excellent animation support, but doesn’t detect clicks very well. JavaScript has excellent support for click and touch, but achieving animation can be daunting without use of a framework… and even then, the Javascript is merely being used to manipulate the underlying CSS., so why use JavaScript to define the animation in the first place?

It seems logical to hybridize the two technologies, letting each do what it does best. I’ll be demonstrating several examples to this effect, starting with a simple text pop-up.

Let’s make a <figure> with content, and a button below it:

<figure id="ouroboros">
	<img src="ouroboros.jpg" alt="Detailed pencil illustration of an ouroboros">
	<h1>Ouroboros or Uroboros</h1> 
	<p>An ancient symbol of eternal cycle and renewal: life and death, winter and summer, destruction and creation. Also represents primordial unity, the original undying force of the universe. First known representation found in Egyptian culture: ouroboros figures decorate funerary objects in the tomb of Tutankhamen.
</figure>
<button>Unleash the Ouroboros</button>

Next, apply a little style to both:

#ouroboros {
	background: #030200;
	color: #fff;
	float: left;
	margin: 0;
	opacity: 0;
	transition: .8s opacity;
	padding-right: 2rem;
}
#ouroboros img {
	width: 33%;
	height: auto;
	float: left;
	margin-right: 2rem;
}
button { padding: .5rem; }

The <figure> element is set to be completely transparent by default, and the transition watches for any change to the opacity property. (Note that I have removed vendor prefixed code for the sake of clarity).

Now let’s make the button do something. The very simplest solution is to write an onclick event directly inline:

<button onclick="document.querySelector('#ouroboros').style.opacity = 1">
Unleash the Ouroboros</button>

Note that the transition works to fade in the figure. CSS doesn’t care what causes the state of the element to change. CSS transitions are triggered by changes to the DOM; what causes those changes is immaterial.

From a code perspective, this is very untidy. As a general rule, it’s better to separate the JavaScript into a function:

function popupy() {
	document.querySelector('#ouroboros').style.opacity = 1;
}

In which case our button script would simply become:

<button onclick=popupy()>Unleash the Ouroboros</button>

Even better would be to abstract the JavaScript entirely, removing any references from the markup at all, by creating an event listener:

window.onload = function () {
	document.querySelector('#ouroboros + button').addEventListener("click",
	function () {
		document.querySelector('#ouroboros').style.opacity = 1;
	});
}

The button then returns to its original form:

<button>Unleash the Ouroboros</button>

In this case, we must wait to ensure that the page has loaded, attach the listener, and wait for a click event before setting the opacity. So long as we could always guarantee that the button element would always be immediately after the figure, the JavaScript would always work. This also makes it far easier to change the fade-in effect: just modify the timing on the CSS transition.

There’s a great deal more we could do to improve this: the JavaScript is not yet used in an accessible or progressive manner, and ideally we could initiate both a fade-in and fade-out for the popup. We’ll look at those issues, and much more, in the articles to come.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.