使い方

jQueryと、nncomment.jsおよびnncomment.cssを読み込む
コメントを表示したい要素に対して、comment()で文字列を渡す
流れるコメント要素はncc-comment-customクラスを持っているので、このスタイルを記述することでコメントのデザインを変更

sample.html

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="nncomment.js"></script>
    <link rel="stylesheet" type="text/css" href="nncomment.css" />
    <script>
      $(function() {
        $('#comment').on('submit', function() {
          var message = $('#message').val();
          $('#message').val('');
          // 表示したい要素に対してコメント
          $('#screen').comment(message);
          return false;
        });
      });
    </script>
    <style>
      .nnc-comment-custom {
        font-size: 1.2em;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <div>
      <form id="comment" action="#">
        <div id="screen" class="nnc-screen" style="width:400px;height:200px;background-color:whitesmoke;" >
        </div>
        <input id="message" />
      </form>
    </div>
  </body>
</html>

実装の方針

jQueryプラグインとして作成
コメント要素を生成・追加して、アニメーションで流す
コメント表示時間はとりあえず一律10秒
なるべくコメントが重ならないように、相対速度計算して表示する行を選択
表示を終えたらコメント要素は消す
（コマンド機能っぽいものは無い）

jQueryを使ってニコニコっぽいコメント表示機能を実現

使い方

実装の方針