Blog

Some of my recent posts and ramblings.

Troxler’s fading in CSS

Found this on Reddit couple of days back and thought of getting some CSS practice. Webkit only though. Firefox works too without the animation, but you can still see the effect.

Troxler’s fading or Troxler’s effect is a phenomenon of visual perception. When one fixates a particular point, after about 20 seconds or so, a stimulus away from the fixation point, in peripheral vision, will fade away and disappear. The effect is enhanced if the stimulus is small, is of low contrast or equiluminant, or is blurred. The effect is enhanced the further the stimulus is away from the fixation point. Source: Wikipedia

Fixate on the +, after about 10-15 seconds the circles around it will fade away and you will see a green dot revolving around a circle. If you look away, you will see the below circle with green dots. Blinking is ok, but try not to for the best effect.

+


Leave a Reply

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>