Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

社内ツールで、webページにコメントを付ける機能が欲しくなったのでjQueryプラグインを作りました。
demo

デモ:http://wmoai.github.io/nncomment/
ソース:https://github.com/wmoai/jquery.nncomment

使い方

  • 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秒
  • なるべくコメントが重ならないように、相対速度計算して表示する行を選択
  • 表示を終えたらコメント要素は消す
  • (コマンド機能っぽいものは無い)
wmoai
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away