皆さんこんにちは、ひとみマンです。

今回は、OBSのブラウザソースに動きを持たせてみよう、というお話です。

OBSのブラウザソースでカスタムCSSを使用することで、テキストに躍動感を持たせるアニメーションを追加することができます。

CSSのアニメーション機能は非常に強力で、ブラウザソースを動かしたり、変形させたり、色を変えたりすることが可能です。以下は、ブラウザソースに躍動感を持たせるいくつかの例をご紹介します。

尚、こちらの記事で紹介している内容は、以下の動画でも確認する事ができますので、良ければ参考にしてみてください。

【2023年最新】OBSのブラウザソースを回転させたりフェードアウトさせたりするコマンド「カスタムCSS」を使ってみよう！【OBS Studio初心者向け使い方動画】

ブラウザソースを追加するためには、ソースの「＋」から「ブラウザ」を選択します。

プロパティの中に「カスタムCSS」部分がありますので、ここに以下で紹介するコマンドをコピペで貼り付けることにより、指定の動きを再現する事ができます。

1. フェードイン・アウト： ブラウザソースを徐々に表示・非表示にするアニメーションです。

@keyframes fadeInOut { 0%,100% { opacity: 0; } 50% { opacity: 1; } } body { animation: fadeInOut 5s infinite; }

2. 上下左右の動き： ブラウザソースを画面上で動かすアニメーションです。

@keyframes moveUpDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30px); } } body { animation: moveUpDown 2s infinite; }

3. ズームイン・アウト： ブラウザソースを拡大・縮小するアニメーションです。

@keyframes zoomInOut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } } body { animation: zoomInOut 3s infinite; }

4. テキストの回転： ブラウザソースを中心軸を基準に回転させるアニメーションです。

@keyframes rotateText { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body { animation: rotateText 5s infinite linear; }

これらの基本的なアニメーションを基に、さまざまな組み合わせや変更を行うことで、様々なエフェクトを作成することができます。

また、CSSにはこれ以外にも多くのプロパティとアニメーション効果が用意されているため、必要な効果や動きに応じてカスタマイズしてください。

OBSでブラウザソースを使用する際には、このカスタムCSSを適用する部分に上記のコードをコピー＆ペーストするだけで、簡単にテキストアニメーションを追加することができます。

当サイトでは、他にも音声フィルタの使い方など、OBSに関するさまざまな使い方を記事にしておりますので、良ければ参考にしてみてください。

OBSの音声フィルタの種類を総まとめ！おすすめはノイズ抑制とコンプレッサーとVSTプラグイン！【OBS初心者向け使い方動画】

皆さんおはようございます、ひとみマンです。 本日も無料のライブ配信ソフト「OBS」の使い方の説明をしていきたいと思います。 この記事で紹介している内容は、以下の動画…

ひとみマンのOBS学校

最後までお読みいただき、ありがとうございました。