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

  • 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. s-MBPR_9V9A8323_TP_V
  2. 20160630_1

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

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

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

  3. jQuery bluroverlay.js Plugin Demo
  4. 20160204blog

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

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

    本をめくるような電子カタログプラグイン「turn.js」のご紹介です。…

  5. 20161004blog_img1

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

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

    サイト上のぼかされた画像をスクロールに合わせて画像を表示してくれるja…

  6. bsN695_ipadwosousasurute

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

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

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

おすすめ記事

  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. 6d7d03d48271a903c1077ec6128b8d1b_s

    やってはいけない!ホームページ制作

    やってはいけない!!逆効果を生んでしまうブラックSEO!!
  2. 201601190

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン①
  3. bsN695_ipadwosousasurute

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

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

    制作ツールブログ!!

    ワードプレスを運営するなら入れておきたいお勧めのプラグイン④
  5. 20160900blog

    SEO対策

    Googleが公表するSEOランキングの3大要素!