HTML


<div id="main">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat pharetra massa commodo adipiscing. Nulla vulputate auctor est eu pretium. Maecenas accumsan varius adipiscing. Nunc suscipit sem in dui tempus interdum. Nullam quis suscipit nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed rhoncus eros vitae ante scelerisque sed convallis leo porttitor.
    </p>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat pharetra massa commodo adipiscing. Nulla vulputate auctor est eu pretium. Maecenas accumsan varius adipiscing. Nunc suscipit sem in dui tempus interdum. Nullam quis suscipit nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed rhoncus eros vitae ante scelerisque sed convallis leo porttitor.
    </p>
</div>


CSS


body {
  background: #1b1613;
  color: #FFF;
  font-family: "Rockwell", "Bookman Old Style", serif;
  font-size: 1.2em;
}
#main {
  margin: 30px auto;
  width: 500px;
}
span {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
.change {
  opacity:0;
}



JS


$(document).ready(function() {
    $('p').each(function(){        
        var spans = $(this).text().split(' ');        
        $p = $("<p></p>");        
        $.each(spans, function(index, value) {
          $p.append($("<span>"+value+" </span>"));
        });        
        $(this).replaceWith($p);        
    });
       
    $("#main span").each(function(index) {
        var r = Math.floor(Math.random() * 2000);
        $(this).delay(r).fadeTo('slow', 0);
    });    
});




CodePlay Playground as you play with the keyboard:

Console

The CodePlay Code Box Editors Playground is very simple to use, anyone can directly interact with a minimum of knowledge of HTML experience, live an idea or a project. We believe that only 5% of the developers has the full capacity and knowledge of each key on the keyboard. Therefore we decided to put together a single command from the Key [Esc] == 27.
For every need and every situation the keyboard [Esc] key fixes and puts in place the Original Initial Code Box Editors.
All this without losing the contents of each Box Editors .
!Enjoy your CodePlay.


CodePlay Playground is a project based on WordPress entirely revised to have a clean and dynamic HTML output.

Editor:

- [Esc] To reset the Box Editors and the closure of any open window overlay, including the Output (FULL) Preview.

New! - Double Click to Expand /Open & Close All Box Editors

New! - Ctrl + Up/Down to Show /Hide the Footer Bar. This allows hide footer bar when you want, + ESC to Back.

New! - Preview in Full page is now also possible via dblClick on the Vertical Drag-bar. Each keyboard action can be Reset via the ESC button.


Ex.
- Close this? [Esc], or a Click outside.


Front End User - New /Save Post is Now Open, Register *required.
New Play Now