- jQuery Marqueeのインストール: まず、jQuery Marqueeをダウンロードしてプロジェクトに組み込む必要があります。公式ウェブサイトから最新バージョンのファイルを入手し、HTMLファイル内でスクリプトを読み込むようにします。
<script src="jquery.marquee.min.js"></script>
- テキストのスクロール: 次に、テキストをスクロールさせる方法を見てみましょう。以下の例では、クラス名が"marquee"の要素内のテキストが左から右へスクロールします。
<div class="marquee">スクロールするテキスト</div>
<script>
$('.marquee').marquee({
duration: 5000, // スクロールの速度
direction: 'left', // スクロールの方向
pauseOnHover: true // マウスオーバーで一時停止するかどうか
});
</script>
- 画像のスクロール: 同様に、画像をスクロールさせることもできます。以下の例では、クラス名が"marquee"の要素内の画像が上から下へスクロールします。
<div class="marquee">
<img src="image1.jpg" alt="画像1">
<img src="image2.jpg" alt="画像2">
<img src="image3.jpg" alt="画像3">
</div>
<script>
$('.marquee').marquee({
duration: 3000,
direction: 'down',
pauseOnHover: true
});
</script>
以上のように、jQuery Marqueeを使用することで、テキストや画像を簡単にスクロールさせることができます。必要に応じて、さまざまなオプションを設定してカスタマイズすることもできます。