JavaScript

【簡単】sagscroller.jsで文字と画像を自動縦スクロールさせる方法

この記事では、sagscroller.jsを使ってリストタグに設定した文字リンクや画像を自動で縦スクロールする方法をご紹介します。
縦スクロールエリアを簡単に設定し、ページのデザインをより動的で魅力的にすることができます。

文字と画像の縦スクロールエリアのCSS記述

まず、縦スクロールエリアのCSSを記述します。ここでは、文字リンク用のエリア(id=”mysagscroller”)と画像用のエリア(id=”mysagscroller2″)の2パターンを用意しました。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:left;
}

.sagscroller{
	width: 310px;
	height:300px;
	overflow:hidden;
	position:relative;
	border:5px solid black;
}
.sagscroller ul{
	position:absolute;
	margin:0;
	padding:0;
	background:white;
	list-style:none;
	width: 300px;
}
.sagscroller ul li{
	display:block;
}
.sagscroller ul li .rsslabel{
	margin-top:5px;
	font-size:12px;
	clear: both;
}
/* 文字リスト縦スクロールデモ */
div#mysagscroller{
	width: 310px;
	height:310px;
	float:left;
}
div#mysagscroller ul li{
	color:000000;
	padding:5px;
	margin-bottom:5px;
}
div#mysagscroller ul li:first-letter{
	font-size:24px;
	background:#666666;
	color:#ffffff;
	padding:0 2px;
	margin-right:2px;
}
/* 画像縦スクロールデモ */
div#mysagscroller2{
	width: 300px;
	height:600px;
	border:5px solid #C0C0C0;
	float:right;
}
div#mysagscroller2 ul li img{
	border-width:0;
	display:block;
}
-->
</style>

sagscroller.jsを使ってリストタグに設定した文字リンクや画像を自動で縦スクロールするJavaScriptの記述

次に、JavaScriptを使ってリストタグに設定した文字リンク(id=”mysagscroller”)や画像(id=”mysagscroller2″)を自動で縦スクロールする方法をご紹介します。
sagscroller.jsを使用することで、簡単に縦スクロール機能を追加できます。オプションでスピードや自動スクロール等の設定が可能です。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="sagscroller.js"></script>
<script type="text/javascript">
/* 文字リスト縦スクロールデモ */
var sagscroller1=new sagscroller({
	id:'mysagscroller',
	mode: 'manual'
})
/* 画像縦スクロールデモ */
var sagscroller2=new sagscroller({
	id:'mysagscroller2',
	mode: 'auto',
	pause: 2500,
	animatespeed: 400
})
</script>

文字と画像の縦スクロールエリアのHTML記述

最後に、縦スクロールエリアのHTMLを記述します。ここでは、文字リンクエリア(id=”mysagscroller”)と画像エリア(id=”mysagscroller2″)の2つのパターンを用意しました。

<div id="idWrap">
    <h1>文字と画像を設定したリストタグを自動で縦スクロールします</h1>

<div id="mysagscroller" class="sagscroller">
	<ul>
		<li><a href="https://dad-union.com/javascript/158">表示画像をjQueryを使用して点滅させる方法</a></li>
		<li><a href="https://dad-union.com/javascript/155">jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法</a></li>
		<li><a href="https://dad-union.com/javascript/153">jquery.tablesorter:テーブルタグをソート可能にするJs</a></li>
		<li><a href="https://dad-union.com/javascript/148">snowfall.jquery:紙吹雪を表示するJs</a></li>
		<li><a href="https://dad-union.com/javascript/146">jquery.countdown.js:設定日からのカウントダウンを表示</a></li>
		<li><a href="https://dad-union.com/javascript/158">表示画像をjQueryを使用して点滅させる方法</a></li>
		<li><a href="https://dad-union.com/javascript/155">jQueryとsetIntervalで複数のpng画像一定間隔で切替える方法</a></li>
		<li><a href="https://dad-union.com/javascript/153">jquery.tablesorter:テーブルタグをソート可能にするJs</a></li>
		<li><a href="https://dad-union.com/javascript/148">snowfall.jquery:紙吹雪を表示するJs</a></li>
		<li><a href="https://dad-union.com/javascript/146">jquery.countdown.js:設定日からのカウントダウンを表示</a></li>
	</ul>
</div>


<div id="mysagscroller2" class="sagscroller">
	<ul>
	<li><img src="i1.jpg" alt="1" /></li>
	<li><img src="i2.jpg" alt="2" /></li>
	<li><img src="i3.jpg" alt="3" /></li>
	<li><img src="i4.jpg" alt="4" /></li>
	<li><img src="i5.jpg" alt="5" /></li>
	<li><img src="i6.jpg" alt="6" /></li>
	<li><img src="i7.jpg" alt="7" /></li>
	<li><img src="i8.jpg" alt="8" /></li>
	<li><img src="i9.jpg" alt="9" /></li>
	<li><img src="i10.jpg" alt="10" /></li>
	</ul>
</div>
    
</div><!--/idWrap-->

sagscroller:文字や画像を自動で縦スクロールするデモページ

実際の動作を確認したい場合は、以下のデモページをご覧ください。

sagscroller:文字や画像を自動で縦スクロールするデモページ

ソース元:Dynamic Drive DHTML Scripts- SAG Content Scroller

このスクリプトのソース元はDynamic DriveのDHTML Scriptsにあります。詳細な情報は以下のリンクから確認できます。

Dynamic Drive DHTML Scripts- SAG Content Scroller

最後に

以上がsagscroller.jsを使ったリストタグに設定した文字リンクや画像を自動で縦スクロールする方法のご紹介です。ぜひ、ページスペースを有効活用して、より魅力的なサイトを作成してください。

 
※流用される場合は自己責任でお願いします。
 デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。