テキストを流れるように表示するjQueryプラグイン「jQuery.Marquee」

萩原賢二のコーディングストック > プログラミング > テキストを流れるように表示するjQueryプラグイン「jQuery.Marquee」

2020.03.5

テキストを流れるように表示するjQueryプラグイン「jQuery.Marquee」

Youtubeなどでよく見かけるテキストが下から上へ流れるような効果を見かけます。
それとよく似た効果を実現する jQueryのプラグイン「jQuery.Marquee」を試してみました。
HTMLのマーキータグのように左右はもとより、上下に流れるアニメーションをいとも簡単に実現してくれます。
CSSアニメーションでボックスを移動させているのでしょうね。
複雑なCSSソースを見事に隠蔽しています。

使い方は簡単でプラグインをサイトに実装しオプションを設定するだけです。
また、ボックス自体をアニメーションでの移動ですので、
テキストのみならず画像も貼り付け「CSS」を駆使したデコレーションをつけた表現も可能ですね。
この「WordPress」に実装してみました。簡単に実装できて便利です。

以下のサイトで取得します。
「jQueryプラグイン　Marquee」 GitHab
「jQuery Marquee Plugin with CSS3」 Support サイト

jQuery.marqueeのプラグインをWordpressに読み込み

// jQuery.marqueeのプラグインをWordpressに読み込み
function add_marquee(){
	wp_enqueue_script('marquee', get_template_directory_uri() . '/js/marquee/jquery.marquee.js', array('jquery'), '', true);
}
add_action( 'wp_enqueue_scripts', 'add_marquee' );

// jQuery.marqueeのプラグインをWordpressに読み込み

function add_marquee(){

wp_enqueue_script('marquee', get_template_directory_uri() . '/js/marquee/jquery.marquee.js', array('jquery'), '', true);

}

add_action( 'wp_enqueue_scripts', 'add_marquee' );

jQuery.marquee 主なオプション

allowCss3Support	ブラウザがCSS3アニメーションをサポートしている場合でも、jQueryのanimateメソッドの使用
delayBeforeStart	アニメーションを開始するまでの時間（ミリ秒）。デフォルト：1000
Direction	アニメーション化する方向　left,right,up,down
duration	エレメントを移動させたい持続時間(ミリ秒）デフォルト：5000
pauseOnHover	ホバーでマーキーを一時停止します。

jQuery.marquee の設定

// jQuery.marquee の設定
 jQuery(function($) {
  $('#marquee').marquee({
    direction: 'up',
	duration: 4500,
	delayBeforeStart: 0,
  /*  pauseOnHover: true,*/

  });
});

// jQuery.marquee の設定

jQuery(function($) {

$('#marquee').marquee({

direction: 'up',

duration: 4500,

delayBeforeStart: 0,

/* pauseOnHover: true,*/

});

HTML

// HTML
<div id="marqueeWrapper">
    <div id="marquee">[表示させる文章等々・・・・・・・・・・・]</div>
</div>

// HTML

<div id="marquee">[表示させる文章等々・・・・・・・・・・・]</div>

</div>

Marquee実態のCSSソース

// Marquee実態のCSSソース
#marqueeWrapper {
    background-image: url([画像を保存してあるフォルダー]/marqueeBack2.jpg);
}
#marqueeWrapper div {
  font-family: \"游ゴシック\", \"Yu Gothic\", YuGothic, \"ヒラギノ角ゴ Pro\", \"Hiragino Kaku Gothic Pro\", \"メイリオ\", \"Meiryo\", sans-serif; 
  background: #ccc0;
  margin: 20px;
  width: 100%;
  height: 400px;
  color: #000;
  font-weight: bold;
  font-size: x-large; 
  width:95%;
  line-height:2em;
  overflow: hidden;
}