【フェーダー】フェードインで表示するニュースティッカー

フェードインで表示するニュースティッカーを、プラグインを利用せずシンプルなjQueryの記述で実装しています。サンプルは画像上に透過の背景色を乗せ、その上にニュースティッカーを表示させています。

htmlのコードは下記になります。
ニュースの1件1件はliタグでマークアップします。ニュースの日付はtimeタグ、ニュースのテキストはリンクを想定してaタグにします。

<div class="fade_contents"><img src="fade01.jpg" alt="">
<div id="news_ticker">
	<ul id="news_ticker_list">
		<li class="news_ticker_list_item">
			<time datetime="2019-04-26">2019.04.26</time>
			<a href="#">ダミーテキスト</a>
		</li>
		<li class="news_ticker_list_item">
			<time datetime="2019-04-05">2019.04.05</time>
			<a href="#">ダミーテキストダミーテキスト</a>
		</li>
		<li class="news_ticker_list_item">
			<time datetime="2019-03-31">2019.03.31</time>
			<a href="#">ダミーテキストダミーテキストダミーテキスト</a>
		</li>
	</ul>
</div>
</div>

続いてCSSのコードです。
ニュースのliタグはopacity: 0で透明にしておき、クラス名is-activeが付与された時のみopacity: 1で表示させます。opacity: 0でもリンクは動作するためposition: absoluteで重ねてz-index: -1にします。そして、クラス名is-activeが付与された時のみz-index: 1にして、opacity: 0のリンクが動作するのを回避します。また、ニュースのliタグにwhite-space: nowrap、overflow: hidden、text-overflow: ellipsisを設定し、ニュースのテキストがはみ出した場合は「…」の省略文字を表示させます。
なおスマホ表示時にline-heightを初期化していますが、line-height: 1ではリンクの下線が消えてしまうためline-height: 1.3を設定しています。

.fade_contents {
	position: relative;
	max-width: 600px;
	margin: 0 auto;
}
#news_ticker {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50px;
	background: rgba(255, 255, 255, 0.8);
	font-size: 14px;
	line-height: 50px;
}
.news_ticker_list_item {
	position: absolute;
	max-width: 100%;
	padding: 0 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity;
	transition-timing-function: ease;
	z-index: -1;
}
.news_ticker_list_item.is-active {
	opacity: 1;
	z-index: 1;
}
.news_ticker_list_item time {
	margin-right: 16px;
	color: #6b9ed3;
}
.news_ticker_list_item a {
	color: #000;
}
.news_ticker_list_item a:hover {
	color: #6b9ed3;
}
@media screen and (max-width: 600px) {
	#news_ticker {
		height: 80px;
		line-height: 1.3;
	}
	.news_ticker_list_item time {
		display: block;
		margin: 15px 0 8px;
	}
}

最後にjQueryのコードです。
まずニュースのliタグの最初の1件目にクラス名is-activeを付与します。次の処理はsetIntervalで5秒置きに継続して実行します。ニュースのliタグの2件目にクラス名is-activeを付与し、endで1つ前の要素である1件目のニュースのliタグに戻ります。そして1件目のニュースのliタグからクラス名is-activeを削除し、appendToでニュースのliタグの一番最後に移動します。

$(function() {
	if ($("#news_ticker").length) {
		var a = $("#news_ticker_list");
		var r = $(".news_ticker_list_item:first-child", a);
		r.addClass("is-active");
		setInterval(function () {
			$(".is-active", a).next().addClass("is-active").end().removeClass("is-active").appendTo(a)
		}, 5000)
	}
});