プログラミング

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

    JavaScriptのアニメーションライブラリ AniJS
  2. プログラミング

    Django Webアプリケーションの構築 デザイン要素としてbootstrap…
  3. サーバー環境

    wordpress メールをSMTP経由でのメール送信するように変更する
  4. Web・デザイン

    CSS3 機能 セレクタ、target擬似クラス、構造擬似クラスについて学ぶ
  5. Web・デザイン

    Illustrator ショートカットデータベース、カテゴリー別絞り込み 、マウ…
PAGE TOP