プログラミング

テキストを流れるように表示する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. EC-CUBE 4.0 インストール
  1. サーバー環境

    Aws EC2 Apache + Mysql + php7 構築の記録
  2. プログラミング

    ワードプレス AmCharts Javascript ライブラリー を表示させる…
  3. Web・デザイン

    ページ上の要素をふるわす CSShake 「CSSアニメーションライブラリー」
  4. サーバー環境

    無料SSL証明書 Let’s Encrypt でワイルドカードな証明…
  5. Raspberry PI

    raspberryPi 4B CenotOS7 をインストール LAMP環境を…
PAGE TOP