プログラミング

テキストを流れるように表示する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. wordpres5をubuntu nginxにインストール
  2. ubuntu 20.04 nginx php mysql Webサーバー環境整備
  3. Ubuntu nginx SSL
  4. EC-CUBE 4.0 インストール
  1. サーバー環境

    Aws EC2 Apache + Mysql + php7 構築の記録
  2. サーバー環境

    wordpress メールをSMTP経由でのメール送信するように変更する
  3. サーバー環境

    無料のSSL証明書 Let’s Encrypt 試してみました。
  4. プログラミング

    [python] Django ローカル環境にインストール サンプルアプリケーシ…
  5. Web・デザイン

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