ガイドメニュー

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

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

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

配信をこよなく愛している者です。Twitchという配信サイトで活動しています。是非以下のからフォローお願いします

今回紹介するのは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では色んなエフェクト、アニメーションのテキストを使うことが出来ます

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

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

 

配信はTwitch(ツイッチ)で行っています。フォローよろしくお願いします

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

ReinyaN

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

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

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

ReinyaN

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

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