動きのあるホームページブログ!!

  • TOP
  • ブログ
  • ニコ動のような流れるコメントを表示するJQueryプラグインのご紹介!!
20160707blog

動くホームページブログ!!

ニコ動のような流れるコメントを表示するJQueryプラグインのご紹介!!

ニコ動やニコ生でよく見られる流れるようなコメントができるNicoScreen.jsです。
こちらのJavaScriptを使用することにより、画像の上にコメントを流したり、
Youtubeの埋め込み動画の上などに設定したコメントを流すことのできるユニークなプラグインです。

また任意でコメントを入力し、流すことも可能!

文字間隔やスピードのタイミングを合わせることにより、よりニコ動ぽい見せ方をできます。

以下記述例です。

HTMLの記述

<div id="nicoscreen" style="width:560px;height:349px"> 
	ここにコメントを流したいエリア 
</div>

HEAD内に以下を記述

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="nicoscreen.js"></script>
<script type="text/javascript">
	
	var obj = {
		
		//基本情報が設定できます
		"base":{
			color:"white", //文字の色を指定します
			speed:"normal", //文字が流れるスピードを指定します。slow/fast/normal 
			interval:"normal",//文字が流れる間隔を指定します。slow/fast/normal
			font_size:"30px", //フォントのサイズを指定します。
			loop:true //文字が最後まで流れた後に、繰り返すかどうか true/false
			
		},
		
		//ここに、重ねるコメントを登録します。個数制限はありません。
		"comments":[
			
			"コメント1",
			"コメント2",
			"コメント3",	
			"コメント4",
			"コメント5",
			"コメント6"
			
			
			
		]
		
	};

	nicoscreen.set(obj);
	nicoscreen.start();

</script>

 

今回サンプルの動画がないため、静止画でのデモサイトをご用意しました。

デモサイトはこちら

JSファイルのダウンロードは以下から!!!

nicoscreen

jquery

この記事が気に入ったら
いいね!お願いします。

最新情報をお届けします

関連記事

  1. bsN695_ipadwosousasurute

    動くホームページブログ!!

    背景動画を用いたWEBサイト!!

    背景動画を用いることによってサイトの雰囲気、サービスの具体的な内容を動…

  2. ice_screenshot_20160831-012703

    動くホームページブログ!!

    RTLテキスト対応JQueryのコンテンツスライダー・グライダーの作成方法

    グライダーとは自動再生やカスタムスライドコントロール、無限ループ、自動…

  3. 20160825blog

    動くホームページブログ!!

    PDFファイルを手軽に電子カタログに変換できるWEBサービス紹介!!

    今回ご紹介させて頂くのは誰でも手軽にPDFファイルを本のようにめくれる…

  4. s-MBPR_9V9A8323_TP_V
  5. jQuery bluroverlay.js Plugin Demo
  6. 20160630_1

    動くホームページブログ!!

    WordPress上で本をめくるような電子カタログプラグインのご紹介!!

    WordPress(ワードプレス)上でつくる「本をめくるような電子カタ…

おすすめ記事

  1. ice_screenshot_20160831-012703
  2. 20160825blog
  3. CoverVid
  4. 20160810blog1
  5. 9eebd6ae3e003dafbcb134405e540da0_s
  6. 20160801blog
  7. 20160630_1

最近の記事

  1. ドラッグ&ドロップ機能を可能にするモーダルポップアッププラグ…
  2. スクロールする際に画像をフェードさせるJavascriptプ…
  3. レスポンシブ対応!!自動フルスクリーン背景スライドの作成方法…
  4. Googleが公表するSEOランキングの3大要素!
  5. RTLテキスト対応JQueryのコンテンツスライダー・グライ…

アーカイブ

  1. CoverVid

    動くホームページブログ!!

    背景にフルスクリーン動画を表示させる「covervid.js」の紹介です!
  2. 20160801blog

    制作ツールブログ!!

    簡単にできる多言語サイトの作り方!
  3. 05

    SEO対策

    SEO上メリットの大きいタイトル要素とホームページの特徴づけについて
  4. 20161004blog_img1

    動くホームページブログ!!

    スクロールする際に画像をフェードさせるJavascriptプラグインのご紹介!!…
  5. 8b5c6a43c12ceeea8b4844a8fe15efc8_s

    SEO対策

    SEO対策を行う上で知って得する検索順位が決まる仕組みについて!!