OBS Xsplitハウツー 配信オーバーレイ関係

【配信】CodePenのアニメーションやエフェクトのテキストを配信ソフトで使う方法

#17LIVE #PR

雑談なら17LIVE

17LIVEのアプリのDL先はこちら

筆者もここで活動しているよ!

掲載期間 2022年3月22日(火)~2022年4月30日(土)

みなさんおはこんばんちは(@ReinyaNchannel)です

今回紹介するのはCodePenというエフェクトやらアニメーションのHTMLやJsのコードが共有できるサイトで、そのコードを配信ソフトを使って、配信でもつかおうぜっていう話です

知っている人は無視してください

 

配信ソフトを使うのは

  • OBS
  • Xsplit

これら2つの配信ソフトを使って紹介していきます。

 

また、CodePenを使う際は基本的には両配信ソフトではそんなに難しくないので、エフェクトやアニメーションのテキストを使いたい人はこの記事を参考にして見ください

アニメーションテキストを使うということは、オーバーレイとしても使えるので、デフォルトのテキストソースで物足りない人は試してみてください

 

とりあえず実際にこんな感じで配信で使っていますよというのもを先に見せておきますね

マトリクスみたいな背景がありますが、これを配信ソフトなでも使える

 

マトリックスみたいなエフェクトは以下のコードです

See the Pen
Matrix digital rain (animated version)
by yuanchuan (@yuanchuan)
on CodePen.

 

この記事はこんな方におすすめ

  • CodePenを配信ソフトで使ってみたい
  • デフォルトのテキストソースでは物足りないので、エフェクトのテキストを使いたい

 

 

 

CodePenを配信ソフト(OBS、Xsplit)で使う方法

 

 

それではサクッとCodePenを使う方法を共有していきます

CodePenのコードをダウンロードする

CodePenをダウンロードする方法。手順を書いていきます

ダウンロードする手順

  1. Exportをクリック
  2. Export.zipをクリック

 

 

ダウンロードしたファイルを確認

 

そして、配信ソフトで使うファイルはこれです

 

 

OBSでCodePenを使う方法

簡単な流れ

  1. ファイルは「pen-export-YoqWeR\dist\index.html」
  2. Indexファイルを選択
  3. OBSにIndexファイルをドラッグ・アンド・ドロップ

 

 

XsplitでCodePenを使う方法

簡単な流れ

  1. ファイルは「pen-export-YoqWeR\dist\index.html」
  2. Indexファイルを選択
  3. XsplitにIndexファイルをドラッグ・アンド・ドロップ

 

 

まとめ

CodePenでは色んなエフェクト、アニメーションのテキストを使うことが出来ます

筆者も最近はグリッチのエフェクトを探したり、配信で使えそうなものを探しています

では、なにかありましたら記事を上げます

 

サイト管理者のプロフィール

AkaMaruServer

ReinyaN

17LIVEを拠点に活動しているストリーマーで活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

関連記事とスポンサーリンク

  • この記事を書いた人
  • 最新記事

ReinyaN

17LIVEを拠点に活動しているストリーマーで活動してる「ReinyaN」です ゲーム配信しながら雑談をしています。 ブログでは配信に関する情報の記事を上げており、参考になる記事がたくさんあると思いますので探してみてください。

-OBS, Xsplitハウツー, 配信オーバーレイ関係
-, , , , ,


Warning: include(): Filename cannot be empty in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11

Warning: include(): Failed opening '' for inclusion (include_path='.:/opt/php-7.4.28/data/pear') in /home/reinyanch/25reinyan25.net/public_html/wp-content/plugins/st-lazy-load/templates/wp-template.php on line 11