Experimental animated doodle

by Kai Carver

HTML

<body>
    <h1>Un message: <button id="fullscreen" onclick="requestFullScreen(document.body)">Full Screen</button></h1>
  <div id="texty" style="font-family: Courier; font-size: 3em;">This should be animated, but it doesn't work with Firefox :(</div>
<div id="words" style="font-family: Courier; font-size: 3em;"><pre>
    B                  F
     B                F
      B              F
       B            F
        B          F
         B        F
          B      F
         B        F
        B          F
       B            F
      B              F
     B                F
    B                  F
    BO                OF
     BO              OF
      BO            OF
       BO          OF
        BO        OF
         BO      OF
          BO    OF
         BO      OF
        BO        OF
       BO          OF
      BO            OF
     BO              OF
    BO                OF
    BON              XOF
     BON            XOF
      BON          XOF
       BON        XOF
        BON      XOF
         BON    XOF
          BON  XOF       
         BON    XOF      
        BON      XOF     
       BON        XOF    
      BON          XOF   
     BON            XOF  
    BON              XOF 
    BON A            XOF 
     BON A          XOF  
      BON A        XOF   
       BON A      XOF    
        BON A    XOF     
         BON A  XOF      
          BON  XOF       
         BON A  XOF
        BON A    XOF
       BON A      XOF
      BON A        XOF
     BON A          XOF
    BON A            XOF
    BON AN           XOF
     BON AN         XOF
      BON AN       XOF
       BON AN     XOF
        BON AN   XOF
         BON AN XOF
          BON ANXOF
         BON AN  XOF
        BON AN    XOF
       BON AN      XOF
      BON AN        XOF
     BON AN          XOF
    BON AN            XOF
    BON ANN           XOF
     BON ANN         XOF
      BON ANN       XOF 
       BON ANN     XOF  
        BON ANN   XOF   
         BON ANN XOF    
          BON ANXOF...

CSS

body {
  background: #eee; 
}
 
#texty { font-size: 1em; font-family: Courier; }
#words { display: none; }

JavaScript

var texts = []
lots = document.getElementById("words").innerText
var lotsarray = lots.split("\n")
for (var i = 0; i < lotsarray.length; i++) {
  texts.push({ text: lotsarray[i], delay: 200})
}
texts.push(  { text: "!!! BON ANNIVERSAIRE XOF !!!",  delay: 5000}
)
var frameNumber = 0

$(function() {
  function goFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
  }

  $('#fullscreen').on('click', function() {
      var elem = document.body;
      var req = elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
       req.call(elem);
  });
  next();
});

function next() {
  var frame = getFrame()
  display(frame)
  nextFrame()
  setTimeout(next, frame.delay/2);
}
function getFrame() {
  return texts[frameNumber]
}
function nextFrame() {
  frameNumber += 1
  if (frameNumber >= texts.length) frameNumber = 0
  return getFrame()
}
function display(frame) {
  var texty = document.getElementById('texty');
  texty.innerHTML = "<pre>" + frame.text + "</pre>";
}