配信画面からのコメントのフェードアウト

カスタマイズ
1

対象: わんコメ
利用しているOS: Windows
対象配信サイト: YouTube
内容: 時間が経ったコメントを配信画面から消したい。

基本的に私の配信はROM専が多いので、コメントの流れる速さが遅く、ゲーム配信にコメントを表示した場合数十分残り続けて邪魔になってしまうので、ヘイト管理のためにも数秒数分経ったら消えるみたいなのを付けて欲しい。

「いいね！」 2
2

ご要望ありがとうございます（アスティさんではありませんがｗ）

実はある程度はOBSのカスタムCSSレベルで対応できそうですので、サンプルをどうぞ。
（というわけで、トピックは後ほどカスタマイズのカテゴリに移動させていただきますねｗ）

@keyframes timerout{
  100% { transform:translateX( -100% ); opacity: 0;}
}.comment { animation: 1s ease 3s timerout forwards; }

※「3秒」後に「1秒」かけて「左にスライドアウト」します。
「右にスライド」させたい場合は-100%となっているところを200%に、
コメントの表示時間を変更したい場合は3sとなっているところを「秒数+s」に、
という風な感じで調整できますので、色々と調整していただけましたら。

「いいね！」 2
3

すみません。便乗で質問させてください。

コメントを一つだけ表示させる為の、.comment:nth-last-child(n + 2) { display: none; }を追加していると、
上記の、@keyframes timerout ～を追加してもスライドアウトしてくれません。
何が原因でしょうか？
v3.0.1 basicテンプレート使ってます。

4
（※当返信は質問を勘違いしていたための的外れ回答なので非表示にしております）

ご質問ありがとうございます！
実は同様の相談のトピックが既にありましたので、そちらを見ていただくと解決されるのではないかと思います。
cssアニメーションを複数使用するにはどうしたら良いですか?
また、上記トピックでも触れておりますが、今回の件にかぎらず、
アニメーションさせる系のアレンジを【同じところに】
（今回の件であれば二つのアニメーションが.commentという同じところを狙っています）
複数適用するのは「それなりの難易度」となっておりますので、
多くの場合は個別対応が必要となるものと思われます。
場合によってはカスタマイズを依頼できる方へ直接相談いただくことをお勧めします。

以上、よろしくお願いします。

5

いつもご親切にありがとうございます。
「コメントを一つだけ表示しつつフェードアウトさせる」ですが、これでいけたと思います。

@keyframes timerout {
100% { transform:translateX( -100% ); opacity: 0;}
}
.comment:nth-last-child(-n+2) {
animation: 1s ease 3s timerout forwards;
}

.comment:nth-last-child(n+2) { opacity: 0; }

もし間違っていたら申し訳ございません。

「いいね！」 2
6

シェアいただきありがとうございます！

あ、そういうことだったのですね :pray:
今回、質問いただいた内容を私が完全に勘違いしてしまっていたようで、
的外れな案内となっていました、申し訳ありません。

改めまして、

こちらのdisplay:noneの「display」というプロパティが、とにかくアニメーションと相性が悪いようなので、animationと併用する場合は、解決方法としてお使いいただいてるように「opacity」などで代替するのが良さそうです。

問題ないかと思われます。

その上で、私の方で新しく思いついた別アプローチの方法が一つありますのでご紹介させていただきますね。
こちらの方法だと、２個目以降のコメントはフェードアウトなどもなく完全に一瞬で見えなくなるという挙動になります。

@keyframes timerout{
  100% { transform:translateX( -100% ); opacity: 0;}
}
.comment { 
  animation: 1s ease 3s timerout forwards; 
  margin-top:100%;
}

（※四行目はazoazoさんが見つけられていた.comment:nth-last-child(-n+2) {という記載でも良いかもしれません。）
azoazoさんは以前にコメント同士の間隔について触れられていたと思いますが、
この例では「コメント同士の間隔をとても長くすることで、次のコメントが画面外まで離れて見えないようにする」といったアプローチにより「１個目のコメント以外は画面に映さない」を実現しています。参考までに :paw_prints:

「いいね！」 1
7

お知らせ遅くなりました、ご所望の機能ですが、わんコメ3.0の公開前後頃に、
テンプレートジェネレーターにて「コメント自動非表示」の項目が晴れて追加されておりますので、
image
これにてご要望解決ということで、当トピックはクローズさせていただきます :paw_prints:

8

トピッククローズ：要望解決のため