[OBS] コメントのフェードイン + フェードアウトのCSSアドオン (時差式でない)
ツイキャスのコメント欄のオーバーレイに表示されるコメントをフェードイン+フェードアウトさせるCSS設定を思い付いたのでここにメモしておきます。
(※: 時間が経つとコメントがすべてフェードアウトして消えてしまうという事はありません。)
動的なアニメーションが既に組み込まれていない既存のカスタムCSSであれば、このメモの最後にあるCSSアドオンを既存のカスタムCSSの最後に付け加える事でコメントのフェードイン+フェードアウトのエフェクトを追加する事が出来ると思います。
又、CSSセレクタを変更すればツイキャスだけでなくYouTubeやTwitchのコメント欄にも対応できるはずです。
コメントのフェードイン、フェードアウト
ツイキャスのコメント欄のオーバーレイ用のカスタムCSSをマウスでクリックしながらいろいろとカスタマイズ出来る『OBSキャスコメ CSSカスタマイザ ー (v0.2)』のメモ📝をこのサイトで公開していますが、かなり前にこのメモへのコメントとして次の様な質問をいただきました:
コメントのフェードイン、フェードアウトとかは難しいのでしょうか
カスタムCSSを使って、コメントのフェードイン、フェードアウトを表現するには、次の様な動的な表示が必要になると思いますが:
| フェードイン (fade in) |
|
| フェードアウト (fade out) |
|
上の質問をいただいた時には、「フェードイン」については表示方法を直ぐ思い付きましたが、「フェードアウト」の方はJavaScriptなどを使わずにCSSだけでエフェクト開始のタイミングを取る方法が思い付かず、良い解決法がひらめきませんでした。。。
でも、最近、違うメモへのコメントとしていただいた別の質問をきっかけに、上の質問の答えを思い付いたので、以降、「フェードイン」と「フェードアウト」のCSS設定といった、それまでの流れも含めて説明していきたいと思います。
次の説明はCSSの基礎を少しはかじった事がある人向けの説明になるので、フェードイン&フェードアウトのCSS設定だけコピーしたい場合はこのメモの後方にある「CSSアドオン」まで読み飛ばしてください。
アニメーション(animation)プロパティ
動的な表示はCSSの@keyframesとanimation-＊プロパティを使うとアニメーションエフェクトとして比較的簡単に表示する事が出来ますが、アニメーションとして変化出来るのは数値として指定出来るCSSプロパティだけに限られます。
文で説明するよりも例を見た方が早いと思うので次に例を2つ挙げておきます。
例Ａは、opacityプロパティの値を「0.1」から「1.0」に変化させるアニメーションになります。 opacityは表示対象になる文字や画像の「不透明度」を指定するのでフェードイン」効果の一部として使う事が出来ます。
※: opacityの値が「0」の場合は透明で何も表示されず、値が「0.5」の場合は50%の透明度で表示されます。 値が「1.0」の場合は不透明度100%で普通に表示されます。
例Ｂはleftプロパティ値を「0%」から「50%」に動的に変化させるアニメーションで、leftプロパティは対象の左端の相対位置を指定するので、例では文字の左端の位置が (薄い色の)枠の左端 (0%)から中央 (50%)に移動します。
例Ａ:
| opacity プロパティ | |
| 始点: opacity: 0.1; | あいうえお |
| 終点: opacity: 1.0; | あいうえお |
| アニメーション (0.1 → 1.0) |
あいうえお |
CSSコード
@keyframes opacity-anim {
0% {opacity: 0.1;}
100% {opacity: 1.0;}
}
#eg1-opacity-example {
animation-name: opacity-anim;
animation-iteration-count: infinite;
animation-delay: 3s;
animation-duration: 5s;
animation-fill-mode: both;
animation-timing-function: ease;
}
例Ｂ:
| left プロパティ | |
| 始点: left: 0%; | あいうえお |
| 終点: left: 50%; | あいうえお |
| アニメーション (0% → 50%) |
あいうえお |
CSSコード
@keyframes offset-anim {
0% {left: 0%;}
100% {left: 50%;}
}
#eg1-offset-example {
animation-name: offset-anim;
animation-iteration-count: infinite;
animation-delay: 3s;
animation-duration: 5s;
animation-fill-mode: both;
animation-timing-function: ease;
}
| animation-delay | 秒 |
| animation-duration | 秒 |
|
animation-timing-function
|
|
|
👆例Ａと例Ｂのアニメーション設定を変更出来るのでどのようなアニメーションになるか確認してみて下さい。 |
|
フェードイン
コメントが全くない空のコメント欄に新しいコメントが追加される場合は、animationプロパティ設定と一緒に次の様な@keyframes設定を使うと新しいコメントのopacityを「0」から「1」に変化するアニメーションだけで「フェードイン」を表現出来ます。
@keyframes fadein-anim0 {
0% {opacity: 0.0;}
100% {opacity: 1.0;}
}
でも、コメント欄に既に他のコメントがある場合は、新しいコメントが追加された時点で、古いコメントが新しいコメントの分だけ下方向にスクロールされる動作が加わります。
この古いコメントのスクロール動作は、新しいコメントが追加された後、比較的短じかい時間で完了するのと、CSS設定でこの時間を直接変更する事は出来ないみたいです。
なのでopacityだけを変化させるだけだと、上右の例Ｃにある様に、コメントが下方向に完全にスクロールした後に、遅れて新しいコメントが表示されるという少し残念な結果になってしまいます。
@keyframes設定でopacityに加えてmax-height※も変化させるアニメーションにすると上右の例Ｄの様な結果になります。
@keyframes fadein-anim1 {
0% {opacity: 0.0; max-height: 0;}
100% {opacity: 1.0; max-height: 3em;}
}
※: CSSのアニメーションでは「height」の値を変化させてもブラウザに無視されてしまうので「max-height」を操作してコメントの高さを変化させます。
このCSSは右上の例Ｄのアニメーションで実際に使われているCSS設定ですが、アニメーションの経過位置が100%の時にCSS設定として「max-height: 3em;」を指定しています。
上の例Ｄの場合だと上段に追加される「コメント」という文字があるボックスが1行だけで、「max-height」で指定している高さの3em (＝文字3つ分の高さ)より低いので問題なく表示されていますが、実際のコメント欄の場合、コメントの文字数が多い場合は改行などで高さが大きくなる場合があるので次の様なCSS設定を使うと良いと思います。
@keyframes fadein-anim1 {
0% {opacity: 0.0; max-height: 0;}
99% {opacity: 1.0; max-height: 100px;}
100% {opacity: 1.0; max-height: 1000px;}
}
フェードアウト
フェードアウトに関しては次の様な@keyframes設定を使うと、animation-durationプロパティで指定した時間内でコメントの表示が徐々に薄くなって消えるアニメーションを表示できます。
@keyframes fade-out {
0% {opacity: 1.0;}
100% {opacity: 0.0;}
}
でも、フェードインした後にどのタイミングでフェードアウトを開始させるかが問題になります。
animation-delayプロパティを使って特定の時間コメントが表示された後にコメントをフェードアウトさせる事は可能ですが、こういった時差式の方法だと新しいコメントが書き込まれない状態が続くと表示されているコメントがすべてフェードアウトされてしてコメント欄が空になってしまいます。。。❌
JavaScriptなどを使ってフェードアウト開始のタイミングを制御する方法もあるかもしれませんが、OBSのブラウザーソースを使ったオーバーレイの表示に独自のJavaScriptを既存のURLに読み込ませるとなると大事になってしまうのでどうしてもカスタムCSSだけで解決出来たら。。
といった理由で、コメントのフェードイン&フェードアウトを上手く表現するCSSが長い事思い付かなかったのですが。。。
コメントの最大表示数
最近、『 L◯NE風ツイキャスコメ欄カスタムCSS x４(アイコンサイズ変更可)バージョン』のメモ📝に次の様なコメントをいただきました:
同じコメントにリプとして返事を返しましたが、次の様なCSS設定を付け加えると比較的簡単にコメントの最大表示数を設定することが出来ます。
.tw-comment-item:nth-child(n+4) {
display: none;
}
1行目の最後の方にある数字より１少ない数のコメントが最大で表示される仕様で、上のCSSをツイキャスのコメント欄のオーバーレイのカスタムCSSとして読み込むと最大3つのコメントが表示されます。
この質問への回答から思い付いたのが次のCSSになります。
CSSアドオン
次のCSSの枠の右下にあるCSSをクリップボードにコピーボタンをクリックするとカスタムCSSがクリップボードにコピーされるので、そのままカスタムCSSとして使うか、既存のカスタムCSS★の最後の部分にペーストして使ってみて下さい。
新しく追加されるコメントはフェードインのアニメーションと共に表示され、コメント欄内の総コメント数が「最大コメント表示数」より大きい場合は一番古いコメントがフェードアウトのアニメーションで非表示となります。
★: カスタムCSSが、既にフェードインやフェードアウトなどのアニメーションを含む場合はアドオンのCSSが上手く機能しない可能性があります。
/* フェードインアニメーションのフレーム設定 */
@keyframes fade-in {
0% { opacity: 0.0; max-height: 0px; }
99% { opacity: 1.0; max-height: 100px; }
100% { opacity: 1.0; max-height: 1000px; }
}
/* フェードアウトアニメーションのフレーム設定 */
@keyframes fade-out {
0% { opacity: 1.0; }
100% { opacity: 0.0; }
}
.tw-comment-item {
animation-name: fade-in;
animation-duration: 2s;
animation-fill-mode: both;
animation-timing-function: ease-out;
max-height: 0px;
}
.tw-comment-item:nth-child(n+4) {
animation-name: fade-out;
animation-delay: 0s;
animation-duration: 2s;
animation-fill-mode: both;
animation-timing-function: ease-out;
}
.tw-comment-item:nth-child(n+5) {
display: none;
}
解説
解決方法としては、コメントの表示最大数を仕様に加えて、最大数より後に来るコメントにフェードアウトをかける事で、フェードインとフェードアウトの両方を可能にしました。
フェードアウト用のキーフレームが@keyframesプロパティによってfada-outという名前で設定されている場合、コメントの最大表示数が「5」の場合を例にすると、フェードアウトが必要なコメントは(5+1)=6番目になるので、フェードアウト用のCSS設定は次の様になります。
.tw-comment-item:nth-child(n+6) {
animation-name: fade-out;
animation-delay: 0s; /* アニメーションが始まるまでの待ち時間 */
animation-duration: 2s; /* アニメーションの長さ */
animation-fill-mode: both;
animation-timing-function: ease;
}
これで、新しいコメントが追加されて位置が6番目以降になったコメントがフェードアウトされます。
但し、これだけだと、初めてコメント欄を表示した時と、コメント欄を再読み込みした時に、コメント欄に6つ目以降の古いコメントがある場合は、そのすべてが表示された後にフォートアウトして消えて行く事になります。
なので、次のCSS設定で(5+2)=7番目以降のコメントを非表示にします。
.tw-comment-item:nth-child(n+7) {
display: none;
}
更新履歴
| [] | カスタムCSSのフェードアウト部のCSSを修正。 |
| [] | 公開日 |
コメント
コメントを投稿