--- title: jQueryを使ってニコニコっぽいコメント表示機能を実現 tags: jQuery JavaScript author: wmoai slide: false --- 社内ツールで、webページにコメントを付ける機能が欲しくなったのでjQueryプラグインを作りました。 ![demo](https://raw.githubusercontent.com/wmoai/jquery.nncomment/master/demo.gif) デモ:http://wmoai.github.io/nncomment/ ソース:https://github.com/wmoai/jquery.nncomment # 使い方 * jQueryと、nncomment.jsおよびnncomment.cssを読み込む * コメントを表示したい要素に対して、comment()で文字列を渡す * 流れるコメント要素はncc-comment-customクラスを持っているので、このスタイルを記述することでコメントのデザインを変更 ```sample.html
``` # 実装の方針 * jQueryプラグインとして作成 * コメント要素を生成・追加して、アニメーションで流す * コメント表示時間はとりあえず一律10秒 * なるべくコメントが重ならないように、相対速度計算して表示する行を選択 * 表示を終えたらコメント要素は消す * (コマンド機能っぽいものは無い)