Typer 3 - Jquery

by Kev

HTML

<div id="canvas"></div>
<div id="menu"></div>

CSS

#canvas {
    margin-top:200px;
    height:64px;
    padding:2em;
    line-height:32px;
    width:100%;
    background:pink;
    position:relative;
}
p  {
    background:red;
}

#menu {
    background: blue !important;
}

JavaScript

var userName = 'Ken',
    quote = "All work and no play makes " + userName + " a dull boy",
    lineCount = 0,
    charPos = 0,
    speed = 200,
    lineHeight = parseInt($("#canvas").css('line-height'));
//$('#canvas').text(quote).delay(200);
//$('#canvas <p></p>').text(quote);

//$('#canvas').text(quote).delay(200);
    var txt1 = "<p>"+ quote +"</p>";              // Create text with HTML
  // var text2 =  $("<p></p>").text("sssText.");  // Create text with jQuery
//    var txt3 = document.createElement("p");
   // txt3.innerHTML = "Text.";               // Create text with DOM

for(var i = 0; i < 6; i++) {
    $("#canvas").append(txt1);     // Append new elements

    $( "#canvas").animate({
    bottom: "+="+lineHeight,
  }, 100, function() {
    // Animation complete.

  });
    
}

//appendText();