TAGS :,

テキストを自動でスクロールさせるマーキー（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プラグインを使うことで
テキストや画像だけでなく、
コンテンツ自体にこういった動きをつけてもおもしろそうです。

ご参考までに。。。