Flickering text with CSS and JavaScript

This is a simple hack to simulate flickering text using the magic powers of CSS3 and some javascript. Pretty much a lazy evening experiment I did for the landing page of a a cool domain I got my hands on.

The CSS

The trick behind the blur is setting the font color to transparent and adding a text-shadow with offset set to zero. The original text becomes invisible and only the text-shadow in itself is visible. The last parameter in the text-shadow attribute is the shadow spread, which can be manipulated to modify the amount of blur that we need. We exploit this trick in the javascript code below.

The transition parameters are added so that the animation is smoothened out. CSS3.info has a good article on how transitions work.

The Javascript

The setInterval function basically calls a function that we pass (first parameter), at fixed time intervals (second parameter). So in the script above, the code snippet executes every 200 milliseconds.

A very crude random decision maker; decides whether to blur or not. This gives a nice effect that retains the sharp image for longer and prevents from flickering the text too much. Once a decision is made to blur a random shadow-spread value in the range of 1 to 10 is generated and passed on with the necessary prefixes as a CSS attribute to the DOM element that we need to get to flicker.

That’s pretty much it! You can view the completed demo here and the source here.

Posted by Anoop Sankar
No Comments

Recent posts

The Third Home

When arriving in a city we see streets in perspective. Sequences of buildings with no meaning. Everything is unknown, virgin. Later we’ll have lived in this city. We’ll have walked in its streets. We’ll have been to the end of the perspectives. We’ll have seen all the buildings. We’ll have lived stories with people. When [...]

Click to read more →

The Butterfly Effect

Does the flap of a butterfly’s wings in Brazil set off a tornado in Texas? One of my favourite thought exercise is to romanticize about the chaos theory. So this other day, I was having a conversation with one of my dear friends regarding the multiple ‘what-if’s in our life line. Isn’t it incredible that [...]

Click to read more →

The Problem with Choice

One fine evening, tired after the days work, I found myself seated on my couch at home lazily surfing channels on the idiot box, unable to decide what to watch. This thought I’ve had a for a long time resurfaced – Life has become so damn complicated nowadays with all the choices that we have [...]

Click to read more →