ニュースティッカーって何？
ニュースティッカーは、新着情報や告知などを、日めくりカレンダーのように次々と表示するツールのことです。ニュースをずらっと並べるよりも、省スペースで表示できるのが魅力。画面に動きが出るので、注目を集めるためにも役立ちます。
2222.00.00 ニュースティッカーのサンプルです
2222.01.01 しばらくすると切り替わります
2222.02.02上下のボタンで情報を手動で切り替え可能
2222.03.03最後の要素を表示したあと、ループして先頭に戻ります
上記のようなに一件ずつお知らせを表示するタイプが多いと思います。一定時間で自動的に表示が切り替わり、ボタンを押すことで手動で表示を変更することも可能。もちろん、リンクを設置して別ページに誘導することもできます。
ニュースティッカーの活躍シーン
- 告知やキャンペーン情報をコンパクトにまとめたい
- 新着情報に割けるスペースが限られている
- 動きを出して注目を集めたい
やはり情報をコンパクトにまとめられるのと、動きを出せるのがメリットかと思います。また、表示する情報を絞る分、他の要素の邪魔になりにくい又は、表示子や情報に集中させる効果もあるかもしれません。
ニュースティッカーの注意点
ニュースティッカーは順番に情報を表示しますので、後ろになるほどユーザーの目に触れる機会は少なくなります。また、トップに用意しておいた情報も、ユーザーの目に触れる前に次の情報に差し替えられる恐れもあります。このため、絶対に見てほしい情報はニュースティッカーで扱うのは避けたほうが良さそうです。
ニュースティッカーの作り方
HTMLで複数のニュースや告知の文章を作り、それをCSSで並べます。このサンプルでは、4つのDIV要素にまとめており、初期状態では最初の文章だけを表示させています。JavaScriptで後続の文章を次々と送りつつ、表示させる文章と非表示にする文章を切り替えることで、日めくりカレンダーのように情報を遷移させているわけです。
ソースコード
HTML
<div id="Nticker">
<div id="NTCL">
<div ><span class="NtcDate">2222.00.00[日付]</span> [TextSample：ここに文章00] </div>
<div ><span class="NtcDate">2222.01.01[日付]</span> [TextSample：ここに文章01]</div>
<div ><span class="NtcDate">2222.02.02[日付]</span> [TextSample：ここに文章02]</div>
<div ><span class="NtcDate">2222.03.03[日付]</span> [TextSample：ここに文章03]</div>
</div>
<div id="NTC-R">
<div id="NTC-UP"><span></span><span></span></div>
<div id="NTC-DOWN"><span></span><span></span></div>
</div>
</div>
CSS
#Nticker{
width:90%;
margin: auto;
height:51px;
border: 0px solid #cccccc;
animation: aniSNB 0.5s!important;
display: flex;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0px 0px 4px 0px rgb(119, 119, 119) ;
overflow: hidden;
}
@keyframes aniSNB {
0% {
opacity: 0.0;
} 50% {
opacity: 0.5;
} 100% {
opacity: 1;
}
}
#NTCL{
width:100%;
padding:0px 0 0 12px;
margin-top:-34px;
box-sizing:border-box;
}
#NTC-R{
width:12px;
height:100%;
background:#eeeeee;
padding:9px 8px 0 8px;
}
#NTC-R div{
cursor: pointer;
height:3px;
margin:auto 0px;
align-items: center;
}
#NTCL div{
margin-bottom:20px;
opacity: 1;
}
.NTC-Active{
opacity: 1!important;
}
.NtcDate{
color:#aaaaaa;
margin-right:5px;
}
#NTC-UP {
position:relative;
display: flex;
cursor: pointer;
width:12px;
height:12px;
border: 0px #cccccc solid;
top:-2px;
}
#NTC-UP span{
position: absolute;
margin:0;
display: inline-block;
transition: all .4s;
height: 3px;
border-radius: 4px;
background: #888;
width: 10px;
}
#NTC-UP span:nth-of-type(1) {
top:4px;
left:-2px;
transform: translateY(0px) rotate(-45deg);
}
#NTC-UP span:nth-of-type(2) {
top:4px;
left:4px;
transform: translateY(0px) rotate(45deg);
}
#NTC-UP:hover span{
background-color: #cccccc;
}
#NTC-DOWN {
position:relative;
display: flex;
cursor: pointer;
width:12px;
height:12px;
border: 0px #cccccc solid;
top:20px;
}
#NTC-DOWN span{
position: absolute;
margin:0;
display: inline-block;
transition: all .4s;
height: 3px;
border-radius: 4px;
background: #888;
width: 10px;
}
#NTC-DOWN span:nth-of-type(1) {
top:4px;
left:-2px;
transform: translateY(0px) rotate(45deg);
}
#NTC-DOWN span:nth-of-type(2) {
top:4px;
left:4px;
transform: translateY(0px) rotate(-45deg);
}
#NTC-DOWN:hover span{
background-color: #cccccc;
}
width:90%;
margin: auto;
height:51px;
border: 0px solid #cccccc;
animation: aniSNB 0.5s!important;
display: flex;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0px 0px 4px 0px rgb(119, 119, 119) ;
overflow: hidden;
}
@keyframes aniSNB {
0% {
opacity: 0.0;
} 50% {
opacity: 0.5;
} 100% {
opacity: 1;
}
}
#NTCL{
width:100%;
padding:0px 0 0 12px;
margin-top:-34px;
box-sizing:border-box;
}
#NTC-R{
width:12px;
height:100%;
background:#eeeeee;
padding:9px 8px 0 8px;
}
#NTC-R div{
cursor: pointer;
height:3px;
margin:auto 0px;
align-items: center;
}
#NTCL div{
margin-bottom:20px;
opacity: 1;
}
.NTC-Active{
opacity: 1!important;
}
.NtcDate{
color:#aaaaaa;
margin-right:5px;
}
#NTC-UP {
position:relative;
display: flex;
cursor: pointer;
width:12px;
height:12px;
border: 0px #cccccc solid;
top:-2px;
}
#NTC-UP span{
position: absolute;
margin:0;
display: inline-block;
transition: all .4s;
height: 3px;
border-radius: 4px;
background: #888;
width: 10px;
}
#NTC-UP span:nth-of-type(1) {
top:4px;
left:-2px;
transform: translateY(0px) rotate(-45deg);
}
#NTC-UP span:nth-of-type(2) {
top:4px;
left:4px;
transform: translateY(0px) rotate(45deg);
}
#NTC-UP:hover span{
background-color: #cccccc;
}
#NTC-DOWN {
position:relative;
display: flex;
cursor: pointer;
width:12px;
height:12px;
border: 0px #cccccc solid;
top:20px;
}
#NTC-DOWN span{
position: absolute;
margin:0;
display: inline-block;
transition: all .4s;
height: 3px;
border-radius: 4px;
background: #888;
width: 10px;
}
#NTC-DOWN span:nth-of-type(1) {
top:4px;
left:-2px;
transform: translateY(0px) rotate(45deg);
}
#NTC-DOWN span:nth-of-type(2) {
top:4px;
left:4px;
transform: translateY(0px) rotate(-45deg);
}
#NTC-DOWN:hover span{
background-color: #cccccc;
}
JavaScript
const NTC = document.getElementById(“NTCL”);
const NTCHD=document.querySelectorAll(‘#NTCL div’);
const NTCUP = document.getElementById(“NTC-UP”);
const NTCDW = document.getElementById(“NTC-DOWN”);
const fstEle= document.getElementById(“NTCL”).lastElementChild;
let parentnode = document.getElementById(‘NTCL’);
const NTCSUM=NTCHD.length-1
let styleNTC = window.getComputedStyle(NTC);
let styleNTCL = window.getComputedStyle(fstEle);
var NTCX=styleNTC.getPropertyValue(‘margin-top’);
NTCX=parseInt(NTCX)
console.log(“NTCX-“,NTCX)
var UpLock=false;
var DownLock=false;
var NTCselecter=0;
var time=0;
var NTCXHa=styleNTC.getPropertyValue(‘line-height’);
var NTCXHb=styleNTCL.getPropertyValue(‘margin-bottom’);
NTCXHa=parseInt(NTCXHa)
NTCXHb=parseInt(NTCXHb)
var NTCXH=NTCXHa+NTCXHb;
window.addEventListener(‘DOMContentLoaded’, function() {
parentnode.prepend(fstEle);
console.log(“fstEle”,fstEle)
})
NTCDW.addEventListener(‘click’, function() {
if(UpLock==false){
UpLock=true;
tickUP()
}
});
NTCUP.addEventListener(‘click’, function() {
if(DownLock==false){
DownLock=true;
tickDOWN()
}
});
async function tickDOWN(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
var fstEle= document.getElementById(“NTCL”).lastElementChild
let child = document.createElement(‘div’);
child.append(fstEle);
NTC.prepend(child); NTCX-=NTCXH; NTC.style.transition=”all 0s ease 0s”;
NTC.style.marginTop=NTCX+”px”;
await sleep(100);
NTC.style.transition=”all 0.5s”;
NTCX+=NTCXH;
NTC.style.marginTop=NTCX+”px”;
var NTC1 = document.getElementById(“NTCL”);
await sleep(500);
DownLock=false;
console.log(“DownLock “,DownLock )
time=0;
}
async function tickUP(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
var fstEle= document.getElementById(“NTCL”).firstElementChild
let child = document.createElement(‘div’);
NTC.style.transition=”all 0.5s ease 0.1s”;
await sleep(100);
NTCX-=NTCXH;
NTC.style.marginTop=NTCX+”px”;
var NTC1 = document.getElementById(“NTCL”);
await sleep(500);
NTC.style.transition=”all 0s ease 0s”;
NTCX+=NTCXH;
NTC.style.marginTop=NTCX+”px”;
UpLock=false;
child.append(fstEle);
NTC.appendChild(child);
console.log(“NTC-B “,NTC1 )
time=0;
}
interval=setInterval (function(){
time++;
if(time>800){// 自動送りの待ち時間
if(UpLock==false&&DownLock==false){
UpLock=true;
tickUP()
} }
//console.log(“Interval RUN”);
}, 1);
const NTCHD=document.querySelectorAll(‘#NTCL div’);
const NTCUP = document.getElementById(“NTC-UP”);
const NTCDW = document.getElementById(“NTC-DOWN”);
const fstEle= document.getElementById(“NTCL”).lastElementChild;
let parentnode = document.getElementById(‘NTCL’);
const NTCSUM=NTCHD.length-1
let styleNTC = window.getComputedStyle(NTC);
let styleNTCL = window.getComputedStyle(fstEle);
var NTCX=styleNTC.getPropertyValue(‘margin-top’);
NTCX=parseInt(NTCX)
console.log(“NTCX-“,NTCX)
var UpLock=false;
var DownLock=false;
var NTCselecter=0;
var time=0;
var NTCXHa=styleNTC.getPropertyValue(‘line-height’);
var NTCXHb=styleNTCL.getPropertyValue(‘margin-bottom’);
NTCXHa=parseInt(NTCXHa)
NTCXHb=parseInt(NTCXHb)
var NTCXH=NTCXHa+NTCXHb;
window.addEventListener(‘DOMContentLoaded’, function() {
parentnode.prepend(fstEle);
console.log(“fstEle”,fstEle)
})
NTCDW.addEventListener(‘click’, function() {
if(UpLock==false){
UpLock=true;
tickUP()
}
});
NTCUP.addEventListener(‘click’, function() {
if(DownLock==false){
DownLock=true;
tickDOWN()
}
});
async function tickDOWN(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
var fstEle= document.getElementById(“NTCL”).lastElementChild
let child = document.createElement(‘div’);
child.append(fstEle);
NTC.prepend(child); NTCX-=NTCXH; NTC.style.transition=”all 0s ease 0s”;
NTC.style.marginTop=NTCX+”px”;
await sleep(100);
NTC.style.transition=”all 0.5s”;
NTCX+=NTCXH;
NTC.style.marginTop=NTCX+”px”;
var NTC1 = document.getElementById(“NTCL”);
await sleep(500);
DownLock=false;
console.log(“DownLock “,DownLock )
time=0;
}
async function tickUP(){
const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));
var fstEle= document.getElementById(“NTCL”).firstElementChild
let child = document.createElement(‘div’);
NTC.style.transition=”all 0.5s ease 0.1s”;
await sleep(100);
NTCX-=NTCXH;
NTC.style.marginTop=NTCX+”px”;
var NTC1 = document.getElementById(“NTCL”);
await sleep(500);
NTC.style.transition=”all 0s ease 0s”;
NTCX+=NTCXH;
NTC.style.marginTop=NTCX+”px”;
UpLock=false;
child.append(fstEle);
NTC.appendChild(child);
console.log(“NTC-B “,NTC1 )
time=0;
}
interval=setInterval (function(){
time++;
if(time>800){// 自動送りの待ち時間
if(UpLock==false&&DownLock==false){
UpLock=true;
tickUP()
} }
//console.log(“Interval RUN”);
}, 1);
カスタマイズについて
要素を増やしたい場合
<div ><span class=”NtcDate”>2222.00.00[日付]</span> [TextSample：ここに文章00] </div>をコピペして増やしてください。
枠を変更したい場合
CSSファイルの最上段、ID:Ntickerを修正すれば枠を変更できます。ただ、表示がズレると思いますので、JAVASCRIPTの変数：NTCXの数値を変更すれば対応できるかと思います。
ここがポイント
1番から4番まである要素はHTMLで記載している時点では、１→２→3→４と並んでいます。この状態でプログラムを作ると、１→２→3と順に送るのは簡単です。しかし、逆方向で1→4と表示したい場合、このままだとスライドアニメーションをしてくれません。このため、JavaScriptでは読み込んだ時点で4→１→２→３に並び替えたうえで、1を表示させています。これで１→２でも、1→４でもスライドアニメーションしてくれます。
ご利用について
CSSで色々とカスタムすると表示が崩れると思います。もう少し扱いやすくなるよう、アップデートしたいと考えています。利用の際は、コードを書く上での参考程度に考えてください。
まとめ
ニュースティッカーの紹介でした。お役に立てれば幸いです。
目次-Index-