COOLINATE

I am very aware that Coolinate is a dumb name for anything ever. Sadly, my other ideas— Line-shadowify, Manystuffify, and Bloginate — all seemed dumber. There weren’t many options really. Putting some lines under text isn’t an activity that conjures epic war-hero-style action verbs. If you are that smug person who has already come up with better names, you can find a contact link in the site map. Otherwise, quit whining.

Using Coolinate

Like most code on this site, Coolinate is written in pure Javascript and thus does not require any extra libraries. To put it into action, you should begin by designing your headline as normal. Let’s say I make a header element.

<h1 id="to-cool">Coolinate is a really stupid name</h1>

and gave it some styles

#to-cool {
    font-size: 300px;
    font-weight: bold;
    color: blue;
}

I could call coolinate on it very easily.

<script>
    coolinate.init('to-cool')
</script>

Generally, there is some nudging of the canvas involved.

#to-cool canvas {
        position: relative;
        top: 50px;
        left: 50px; 
}

Animating it using css transitions

Coolinate adds a class to it’s target element called ‘active’ when it is finished running. You can utilize this to create some elegant css transitions. In the example above, I animate the text-indent property to pull the type slightly left of the canvas replica.

#to_cool {
    font-size: 280px;
    color: rgb(255,141,255);
    transition: text-indent .3s ease-in;
    -o-transition: text-indent .3s ease-in;
    -moz-transition: text-indent .3s ease-in;
    -webkit-transition: text-indent .3s linear;
}

#to_cool.active {
    text-indent: -15px;
} 

How it works

Like Punchout, Coolinate is based on a utility function I wrote called Shellac, which transforms live type into a canvas image. From there, the rest of the process is pretty simple. I just draw some lines and set their global composite to destination-out.

var draw = function(object){
	//use shellac to replicate text
	var canvas = this.shellac(object)
	var context = canvas.getContext("2d")

	//get width and height
	width = canvas.width
	height = canvas.height

	//set composite
	context.globalCompositeOperation = 'destination-out'

	//draw lines
	for(var j=(width/2)*-1;j<width/6;j++){
		//set stroke style
		context.strokeStyle = '#f00'
		context.lineWidth = 2

		// draw line
		context.beginPath()
		context.moveTo(j*6, 0)
		context.lineTo((j*6)+(width/2), height)

		//wrap up
		context.stroke()
		context.closePath()
	}
}

draw(document.getElementById('to_cool')