Create your own ROFL COPTER purely using Javascript and CSS!

I've always hated those still and animated graphical versions of the text ROFLCOPTER, so I decided to make my own one, text, Javascript and CSS based:

ROFL:ROFL:LOL:ROFL:ROFL
           |
  L   /---------
 LOL===       []\
  L    \         \
        \_________\
          |     |
       -------------/

This is a quick and dirty little preformatted version that should easily go into your blog post, website or whereever you want it. It neither is 100% elegant nor will it make DOM/standards nazis cheer in amazement.

It is, however, very lightweight and simple, will integrate into your site style easily and doesn't require you to fiddle with your JS and/or CSS files, it is based on 2 little JS functions calling themselves turning visible/hide the "moving" parts of the whirlybird.

This is the code:

<!--// Supercool ROFLCOPTER snippet by Stefan Ernst ( http://www.thxbye.de/ ) - YAY WE BEGIN //-->
<pre class="roflcopter">
<span id="rofl_main_left">ROFL:ROFL</span>:LOL:<span id="rofl_main_right">ROFL:ROFL</span>
           |
  <span id="rofl_small_top">L</span>   /---------
 <span id="rofl_small_left">L</span>O<span id="rofl_small_right">L</span>===       []\
  <span id="rofl_small_bottom">L</span>    \         \
        \_________\
          |     |
       -------------/
</pre>
<script type="text/javascript">
    //<![CDATA[
        function rofl_chop_left () {
            document.getElementById('rofl_main_left').style.visibility = 'visible';
            document.getElementById('rofl_main_right').style.visibility = 'hidden';            
            document.getElementById('rofl_small_right').style.visibility = 'hidden';
            document.getElementById('rofl_small_left').style.visibility = 'hidden';
            document.getElementById('rofl_small_top').style.visibility = 'visible';
            document.getElementById('rofl_small_bottom').style.visibility = 'visible';
            setTimeout('rofl_chop_right()', 125);
        }

        function rofl_chop_right () {
            document.getElementById('rofl_main_left').style.visibility = 'hidden';
            document.getElementById('rofl_main_right').style.visibility = 'visible';
            document.getElementById('rofl_small_right').style.visibility = 'visible';
            document.getElementById('rofl_small_left').style.visibility = 'visible';
            document.getElementById('rofl_small_top').style.visibility = 'hidden';
            document.getElementById('rofl_small_bottom').style.visibility = 'hidden'; 
            setTimeout('rofl_chop_left()', 125);
        }

        rofl_chop_left();
        
    //]]>
</script>
<!--// Supercool ROFLCOPTER snippet by Stefan Ernst ( http://www.thxbye.de/ ) - YAY THE END //-->

You can manually style the font size/colour and more by changing the css class of the <pre>-tag:

pre.roflcopter {
	color: #ff00ff;
	font-weight: bold;
	line-height: 1em;
	font-size: 18px;
}

Beware though, that non fixed width fonts will most likely mess up the ROFLCOPTER!

Feel free to use it on your site or whereever you might want it. I wouldn't mind though if you left the little credit comment intact. Thanks and enjoy. :)

Stefan Ernst

Create your own ROFL COPTER purely using Javascript and CSS!

Comments

Post new comment

Follow me on Twitter!

Visit me on Flickr!