Animate Comment Nodes in the DOM

If you visit some of the most popular websites on the net today and view the source of their HTML, you might be surprised with what you find. There are often hidden gems and messages in the form of ASCII art embedded in their HTML comments. Troy Hunt recently wrote about some of these messages being recruitment messages, while other messages might just be fun easter eggs left by the developers. If you view the source HTML of websites such as Mozilla, Facebook or Flickr, you might something a little like the image below.

A little crude, but my particular favourite is the source code for theoatmeal.com

I was recently browsing through the trending Github repositories when I came across a fun little plugin called Dom Animator. It is a JavaScript library that allows you to show small ASCII animations within comments in your DOM. It's a little easter egg for anyone inspecting your code.

Using this library seemed like a great way to build a little prototype using ASCII art and HTML comments. In this article, I am going run through a really simple example that shows you how to implement this plugin on your site. Let’s start off by heading to the Github repository and downloading a copy of the plugin.

Next, let’s take a look at a basic example.

In the code above, I have included a reference to the Dom Animator JavaScript file in the head of my HTML. Next, I created a new instance of DomAnimator and passed in a new frame with the text to animate.

That’s it! If you open your Developer tools and view the source, it might look a little something like the image below.

The Dom Animator is a really quick and fun way to leave a message for your more inquisitive website visitors. If you have any trouble getting your site up and running, I recommend taking a look at the demo on the Github repository. If you are looking for some ASCII art inspiration, check out this site to help you generate a message from text. Another useful website for inspiration is 1lineart.com, which has a great list of ASCII art in one line.

Side Note

While the Dom Animator only comes in at just over a tiny 1 KB, it is worth mentioning that adding extra JavaScript to your website could potentially impact your page load times. However, if you aren't particularly worried about this, then the Dom Animator plugin is a really fun way of adding a hidden message to your website!