指定した要素を上下左右にスクロール「Marquee」

当ページのリンクには広告が含まれています。

jQuery Plugin » エフェクト » 指定した要素を上下左右にスクロール「Marquee」

指定した要素をスクロールするプラグイン「Marquee」を紹介します。

jQueryプラグイン「Marquee」

このプラグインは、HTMLのMarquee（マーキー）タグのようなスクロールアニメーションを実装してくれます。要素を指定するだけなので実装も簡単。また、スクロールのスピード、開始位置、方向などなどオプションも豊富なので、サイトにカッコいい効果を追加することができます。

デモでは、指定したテキスト要素がスクロールしています。ご覧ください。

「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>

jQueryプラグイン「Marquee」

ソース（HTML + jQuery）

関連記事（一部広告含む）