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.