プログラミング

テキストを流れるように表示する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 主なオプション
allowCss3SupportブラウザがCSS3アニメーションをサポートしている場合でも、jQueryのanimateメソッドの使用
delayBeforeStartアニメーションを開始するまでの時間(ミリ秒)。デフォルト:1000
Directionアニメーション化する方向 left,right,up,down
durationエレメントを移動させたい持続時間(ミリ秒)デフォルト:5000
pauseOnHoverホバーでマーキーを一時停止します。
jQuery.marquee の設定
HTML
Marquee実態のCSSソース

最近の記事

  1. サーバー環境

    centos7 に Node Version Manager(nvm)で nod…
  2. サーバー環境

    Centos7 に PostgreSQLをインストール PDO接続を試してみる。…
  3. Raspberry PI

    raspberryPi 4B CenotOS7 をインストール LAMP環境を…
  4. プログラミング

    郵便番号データベースで多対多のリレーション
  5. Web・デザイン

    CSS3 リッチな表現 角丸、影、グラデーションについて学ぶ
PAGE TOP