短くする
GIFはすぐにファイルサイズが大きくなります。READMEやチャットに使うなら、480pで3〜8秒がちょうどよい長さです。
HTMLアニメーションをGIFに変換
README、プルリクエスト、ドキュメント、チャットなど、動画を再生できない場所に。コードを貼り付け、サイズを選んで、GIFをダウンロードします。
使い方は3ステップ
- 1
貼り付ける
HTMLを貼り付けるか、.html または .zip ファイルをドロップします。すぐにプレビューが始まります。
- 2
確認する
投稿先に合わせて縦横比を選びます。長さはアニメーションから読み取られ、変更もできます。
- 3
書き出す
MP4、GIF、透過WebM、PNG静止画から選んで、ファイルをダウンロードします。
書き出しやすいHTMLをAIに書いてもらう
依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。一度で問題なく描画できるHTMLになります。
このアニメーションを、htmlto.videoで動画に書き出せるよう、単体で動作する1つのHTMLファイルに書き直してください。 - 16:9 のフレームを前提にデザインしてください。ブラウザのウィンドウにぴったり収まるようにし(100vw × 100vh、スクロールなし)、どの解像度でも拡大縮小できるよう、サイズはすべて vw と vh で指定してください。 - ページの読み込みと同時に自動で始まり、マウス、キーボード、スクロールの操作を必要としないこと。 - 長さを固定してください。長さは1行目に <!-- duration: 8s --> のようなコメントで記載してください。 - アニメーションには、CSSアニメーション、Web Animations API、GSAP、またはタイムスタンプ引数を使った requestAnimationFrame を使ってください。video、audio、iframe は使わないでください。 - CSSとJavaScriptはすべてインラインで記述してください。画像はインラインSVGまたはデータURLで埋め込んでください。フォントとライブラリは、Google Fonts、cdnjs、jsDelivr など、クロスオリジンでの読み込みを許可しているCDNのものだけを使ってください。 - 完全なHTMLを、1つのコードブロックにまとめて返してください。
きれいなGIFにするには
ループがつながる
ループするアニメーションはちょうど1周分で切り出されるため、GIFは途切れずに繰り返されます。
ベタ塗りが向いています
GIFが扱えるのは1フレームあたり256色です。ベタ塗りの図形や文字はくっきり表示されますが、なだらかなグラデーションや写真には縞模様が出ます。
画質を優先するなら
同じコードからMP4を書き出してください。動画を使える場所であれば、より鮮明で、ファイルサイズもずっと小さくなります。
描画できるもの
- CSSのアニメーションとトランジション
- GSAP、anime.js、MotionなどのJavaScriptライブラリ
- Canvas 2D
- CSSまたはJavaScriptで動かすSVG
- WebGLとThree.js
- Web Animations APIと requestAnimationFrame
まだできないこと
- Safari、iPhone、iPadでは書き出せません。プレビューは使えます。
- ページ内の動画、音声、iframeは書き出しに含まれません。
- クロスオリジンでの読み取りを許可していないサーバーの画像やフォントは表示されません。
- クリック、ホバー、スクロールを待つアニメーションは進みません。
- <animate> などのSMILタグで動かすSVGはキャプチャされません。
- 非常に重いWebGLシーンは、性能の低いパソコンでは失敗することがあります。