Edited at

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秒

  • なるべくコメントが重ならないように、相対速度計算して表示する行を選択

  • 表示を終えたらコメント要素は消す

  • (コマンド機能っぽいものは無い)