プログラミング

テキストを流れるように表示する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. Web・デザイン

    Ruby Sass のインストール 開発環境の整備
  2. プログラミング

    PDOで郵便番号辞書データベース構築の記録
  3. プログラミング

    郵便番号データベースで多対多のリレーション
  4. プログラミング

    Emmet CheatSheet 省略記法まとめ
  5. プログラミング

    MySQLによる 条件分岐とサブクエリー
PAGE TOP