テキストを自動でスクロールさせるマーキー(marquee)。
今やWebページ上に組み込むことで、効果的な印象を与えるというよりかは
どちらかというと毛嫌いされてしまうものだったりしますが、
そんなマーキーの動きに対してjQueryでアニメーション効果を加えることで
今までとは違ったマーキーの印象を与えることができる
「jQuery Marquee Animation Plugin」がちょっとおもしろかったのでご紹介。

jQuery Marquee Animation Plugin


JavaScript – jQuery Marquee Animation Plugin – CodeCanyon


デモはこちら:jQuery Marquee Animation Plugin Preview – CodeCanyon

動きのアニメーションはデモページで確認できますが
映画の宣伝の様な強弱の付いたスクロールでテキストや画像が流れていきます。

実装も難しくなく、
オプションではもちろんアニメーションの早さなども変更可能になっています。

◆SCRIPT
<script src="js/jquery-1.5.min.js" type="text/javascript" language="javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" language="javascript"></script>
<script src="fmarquee/jquery.fmarquee.js" type="text/javascript" language="javascript"></script>

<script language="javascript">
        $(document).ready(function() {
                 $('.marquee').fMarquee({width: 960, height: 100});
        });
</script>

<div class="marquee">
        <div class="mchild"><strong>fMarquee</strong> <em>is a simple but<br /> useful jQuery plugin</em></div>
        <div class="mchild">Only 1.4 kilobytes<br />Loads fast, works everywhere!</div>
        <div class="mchild"><em>Easy installation, easy customization</em></div>
</div>

残念ながら無料で使えるプラグインではないようなので
使用するにはライセンスを購入する必要がありますが、
演出面含めて参考になるプラグインだと思います。

jQueryのeasingプラグインを使うことで
テキストや画像だけでなく、
コンテンツ自体にこういった動きをつけてもおもしろそうです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

マーキー(marquee)の動きにjQueryでアニメーション効果を加える「jQuery Marquee Animation Plugin」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR