まだデータがありません。
指定した要素を上下左右にスクロール「Marquee」
当ページのリンクには広告が含まれています。
スポンサーリンク
指定した要素をスクロールするプラグイン「Marquee」を紹介します。
jQueryプラグイン「Marquee」
このプラグインは、HTMLのMarquee(マーキー)タグのようなスクロールアニメーションを実装してくれます。要素を指定するだけなので実装も簡単。また、スクロールのスピード、開始位置、方向などなどオプションも豊富なので、サイトにカッコいい効果を追加することができます。
スポンサーリンク
デモでは、指定したテキスト要素がスクロールしています。ご覧ください。
ソース(HTML + jQuery)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="Marquee with CSS3 Support のデモでーす。"> <title>Marquee with CSS3 Support - jQueryプラグイン</title> <style> div { background: #ccc; margin: 20px; width: 300px; overflow: hidden; } </style> </head> <body> <h1>Marquee with CSS3 Support のデモでーす。</h1> <div id="demo1">←←←←左左左左←←←←</div> <div id="demo2">→→→→右右右右→→→→</div> <div id="demo3">↑↑↑↑上上上上↑↑↑↑</div> <div id="demo4">↓↓↓↓下下下下↓↓↓↓</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.marquee.js"></script> <script> $(document).ready(function() { $('#demo1').marquee(); $('#demo2').marquee({ direction: 'right' }); $('#demo3').marquee({ direction: 'up' }); $('#demo4').marquee({ direction: 'down' }); }); </script> </body> </html>
スポンサーリンク