短めにする
GIFはすぐにファイルサイズが大きくなります。READMEやチャットで使うなら、480pで3〜8秒くらいがちょうどいい長さです。
HTMLアニメーションをGIFに変換
README、Pull Request、ドキュメント、チャットなど、動画が再生できない場所で使えます。コードを貼り付けてサイズを選べば、GIFをダウンロードできます。
使い方は3ステップ
- 1
貼り付ける
HTMLを貼り付けるか、.html / .zip ファイルをドロップします。すぐにプレビューが始まります。
- 2
確認する
動画を使う場所に合わせて縦横比を選びます。長さはアニメーションから自動で読み取り、あとから変更もできます。
- 3
書き出す
MP4、GIF、透過WebM、PNG静止画から形式を選んで、ファイルをダウンロードします。
そのまま書き出せるHTMLをAIに頼む
AIへの依頼文の後ろに貼り付けるか、手元のコードと一緒に送ってください。きれいに描画できる可能性がぐっと高まります。
このアニメーションを、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か data URL で埋め込んでください。フォントとライブラリは、Google Fonts、cdnjs、jsDelivr など、クロスオリジンでの読み込みを許可しているCDNからのみ読み込んでください。 - 完全なHTMLを、1つのコードブロックにまとめて返してください。
きれいなGIFを作るコツ
ループは継ぎ目なく
ループするアニメーションはぴったり1周分で切り出すので、GIFが繰り返されても途中で飛びません。
ベタ塗りが得意
GIFで使えるのは、1フレームあたり256色まで。ベタ塗りの図形や文字はくっきり出ますが、なめらかなグラデーションや写真には縞模様が出ます。
画質を優先するなら
同じコードからMP4を書き出しましょう。動画が使える場所なら、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シーンは、処理の遅いパソコンでは失敗することがあります。