スナックバーについて
スナックバーは通常、画面下部に表示するUIの一種です。細長いバーのような形状になっているのが定番で、何かのお知らせを表示するのによく使われます。モーダルウインドウと異なり、スクロールやクリックなど他の動作ができるようにしておくケースが多いでしょう。
画像ギャラリーのおすすめの使い方
- お得な情報などを伝える
- 成功やエラーなど操作の結果を表示する
- お問い合わせやチャット用のボタンなど
ネットサーフィンをしていると、お問い合わせページへの誘導や、サブスク契約か会員登録への誘導、クッキーの設定などで見かけることがあるかもしれません。他には、チャット相談を呼び出すためのボタンとしても利用されていそうです。
SnackBarの作り方
HTMLとCSSでバー部分の表示デザインを作り、スタイル設定をDisplay:Fixedにして重ねておきます。ただ、これだとずっと表示されているので、消したい場合はJavascriptでクラスを付与または除去するなどの処理が必要です。
単純に透明にするだけだと、スナックバーが重なっている部分の操作が邪魔されるので、ひと工夫します。今回はスタイル設定をHeight:0にすることで、邪魔にならないようにしました。他にも表示順を変更するなどしても大丈夫だと思います。
発火条件は、今回はページを開いた時と、ボタンを押したときに設定しています。一般的な用途としては、ページを開いたときか、少しスクロールしたときに表示させるケースが多いでしょう。これらの発火条件も、Javascriptで設定します。
ソースコード
HTML
<div id="SbAREA"><span id="SBN1"></span><span id="SBN2"></span> ここにメッセージを表示します </div>
CSS
#SbAREA{
width:750px;
height:150px;
background:linear-gradient(to right ,#ff2600,#cc7b00); position: fixed;
bottom:20px;
left:50%;
margin-left:-375px;
animation: aniSNB 0.5s!important;
color:white;
padding:20px 50px 20px 20px;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0px 0px 4px 0px rgb(0, 0, 0) ;
z-index:9999;
}
@keyframes aniSNB {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#SbAREA.activer{
bottom:20px;
}
.closeSNB{
height:0!important;
opacity: 0;
transition:all 0.6s;
}
#SbAREA span{
z-index:650;
position: absolute;
transition: all .4s;
right: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 18px;
}
#SbAREA span:nth-of-type(1) {
top:18px;
transform: translateY(1px) rotate(-45deg);
}
#SbAREAspan:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
top:34px;
}
#SbAREA.hover span{
background: #505050;
}
#SbAREA.activer span:nth-of-type(1) {
transform: translateY(1px) rotate(-45deg);
}
#SbAREA.activer span:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
}
width:750px;
height:150px;
background:linear-gradient(to right ,#ff2600,#cc7b00); position: fixed;
bottom:20px;
left:50%;
margin-left:-375px;
animation: aniSNB 0.5s!important;
color:white;
padding:20px 50px 20px 20px;
box-sizing:border-box;
border-radius: 10px;
box-shadow: 0px 0px 4px 0px rgb(0, 0, 0) ;
z-index:9999;
}
@keyframes aniSNB {
0% {
opacity: 0.0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#SbAREA.activer{
bottom:20px;
}
.closeSNB{
height:0!important;
opacity: 0;
transition:all 0.6s;
}
#SbAREA span{
z-index:650;
position: absolute;
transition: all .4s;
right: 14px;
height: 3px;
border-radius: 2px;
background: #fff;
width: 18px;
}
#SbAREA span:nth-of-type(1) {
top:18px;
transform: translateY(1px) rotate(-45deg);
}
#SbAREAspan:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
top:34px;
}
#SbAREA.hover span{
background: #505050;
}
#SbAREA.activer span:nth-of-type(1) {
transform: translateY(1px) rotate(-45deg);
}
#SbAREA.activer span:nth-of-type(2) {
transform: translateY(-1px) rotate(45deg);
}
JavaScript
const SbAREA = document.getElementById("SbAREA");
const SBN1 = document.getElementById("SBN1");
const SBN2 = document.getElementById("SBN2");
document.addEventListener('DOMContentLoaded', function() {
SbAREA.classList.toggle("activer");
});
SbAREA.addEventListener('click', ()=>{
SbAREA.classList.add("closeSNB");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseover', ()=>{
SbAREA.classList.add("hover");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseleave', function() {
SbAREA.classList.remove("hover");
});
const SBN1 = document.getElementById("SBN1");
const SBN2 = document.getElementById("SBN2");
document.addEventListener('DOMContentLoaded', function() {
SbAREA.classList.toggle("activer");
});
SbAREA.addEventListener('click', ()=>{
SbAREA.classList.add("closeSNB");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseover', ()=>{
SbAREA.classList.add("hover");
console.log("SbAREA ", SbAREA )
});
SbAREA.addEventListener('mouseleave', function() {
SbAREA.classList.remove("hover");
});
まとめ
スナックバーのご紹介でした。ソースコードは簡単なので、色々カスタムしやすいはず。お役に立てれば幸いです。
目次-Index-