【備忘録】CCFOLIAの秘匿タブをOBSで良い感じにフェードイン/アウトさせるCSS

はじめに

備忘録として書いた簡易記事です。
ある程度わかる方向けの内容になっています。

できること

※ループGIFのため、繰り返し表示されています。

• 秘匿タブ(対話画面から選択済)のルームチャットをフェードイン/フェードアウトで表示できます。
• チャットを下寄せにしているため、画面下からポップアップ表示されるような見た目です。

秘匿が送られた時だけ表示される構成にできます。

本件はサポート致しません。自己責任でお願いします。
カスタムCSSが正常に動作しなかった際、CCFOLIAの運営さん・OBSの運営さんに問い合せをしないでください。

配信等で利用される際は、概要欄にURLなどを記載して頂けると励みになります！

【備忘録】CCFOLIAの秘匿タブをOBSで良い感じにフェードイン/アウトさせるCSS
https://qiita.com/aoko_2477/items/aca38bcb8d67cff36c90

注意点

• 対話画面で初期選択を行った際、該当チャットを選ぶと、ポップアップしたチャットが意図した位置で下端に止まらないことがあります。
  その場合は他のチャットタブを何度か行き来すれば正常な位置になります。
• たまに挙動が崩れることがあるため、その場合はリロードしてから再度該当チャットを選択してください。
• スクロールの無効化はしていないため、対話中にスクロールすると表示位置がずれることがあります。

やること

1. ブラウザを下記のように設定する。
   ※https://ccfolia.com/rooms/{ルームID}/chatを指定すること
   
2. カスタムCSSには下記のCSSを記入する

@import url("https://aoko2477.github.io/ccfolia-css/chat-bottom-fade-in-out.css");

/********** パラメータ部分 **********/
:root {
    --background-color: rgba(255, 254, 236, 0);
    --border-color: rgb(10, 93, 213);
    --border-width: 4px;
    --border-radius: 0px;
    /*--font-color: rgb(255, 221, 39);*//*字の色*/
    /*--font-color: rgb(61, 218, 215);*/
    --font-color-fail: rgb(228, 80, 143);
    --font-color-success: rgb(85, 111, 181);
  }

@keyframes fadeBottomInOut {
  0% {
    opacity: 0;
    transform: translateY(150px); /* 下からスタート */
  }
  10% {
    opacity: 1;
    transform: translateY(0);     /* フェードイン完了 */
  }
  80% {
    opacity: 1;
    transform: translateY(0);     /* 表示維持 */
  }
  100% {
    opacity: 0;
    transform: translateY(150px); /* 下へ戻ってフェードアウト */
  }
}

表示色、表示時間、フェードイン・フェードアウトの方向などは、各パラメータを調整してください。
なお、区切り線は非表示にしています。

応用

下端寄せしているので、フェードアウト切れば出しっぱなしにできます。
translateYをtranslateXに変えれば左右からフェードイン/アウト調整もできます。

@import url("https://aoko2477.github.io/ccfolia-css/chat-bottom-fade-in-out.css");

/********** パラメータ部分 **********/
:root {
    --background-color: rgba(255, 254, 236, 0);
    --border-color: rgb(10, 93, 213);
    --border-width: 4px;
    --border-radius: 0px;
    /*--font-color: rgb(255, 221, 39);*//*字の色*/
    /*--font-color: rgb(61, 218, 215);*/
    --font-color-fail: rgb(228, 80, 143);
    --font-color-success: rgb(85, 111, 181);
  }

@keyframes fadeBottomInOut {
  0% {
    opacity: 0;
    transform: translateY(150px); /* 下からスタート */
  }
  10% {
    opacity: 1;
    transform: translateY(0);     /* フェードイン完了 */
  }
  100% {
    opacity: 1;
    transform: translateY(0);     /* 表示維持 */
  }
}

フェードイン/アウトの時間制御

下記のパラメータを追記(or置き換え)していい感じに調整してください。
一応、秘匿を画面上で読めるくらいの時間(主観)に設定しています。

/* フェードイン＆フェードアウト（下から出て下へ消える） */
.MuiListItem-gutters {
  animation-name: fadeBottomInOut;
  animation-duration: 20s;
  animation-fill-mode: forwards;
}

@keyframes fadeBottomInOut {
  0% {
    opacity: 0;
    transform: translateY(150px); /* 下からスタート */
  }
  10% {
    opacity: 1;
    transform: translateY(0);     /* フェードイン完了 */
  }
  80% {
    opacity: 1;
    transform: translateY(0);     /* 表示維持 */
  }
  100% {
    opacity: 0;
    transform: translateY(150px); /* 下へ戻ってフェードアウト */
  }
}

おわりに

簡易的な記事ですが、良いOBS録画画面の足しになれば幸いです！

それでは皆様、快適なTRPGライフをお過ごしください～