Lottie Animation Embedding
Prompt
Create a webpage that demonstrates how to embed Lottie animations using the lottie-web library. Include a responsive container with a sample Lottie animation that plays automatically and has play/pause controls. Add a button to toggle between light and dark themes to show how Lottie animations adapt to different backgrounds.
CODE PREVIEW
AI rewrites this code based on your instructions. Preview is free; copy & download unlocked for ¥100.
AIとの対話に追加する一言
プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします
このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。
初心者なので、各行にコメントを追加して、何をしているか説明してください。
このコードをWordPressのテーマに組み込む方法も教えてください。
動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。
This tutorial demonstrates how to embed Lottie animations using the lottie-web library. Lottie is a JSON-based animation file format that allows you to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.
The key advantage of Lottie animations is their vector nature - they remain crisp at any resolution. The lottie-web library makes it simple to load, control, and render these animations in web projects.
In this example, we've embedded a sample animation that automatically plays when the page loads. The interface includes play, pause, and stop controls to demonstrate programmatic animation control. The theme toggle button shows how Lottie animations can adapt to different color schemes, making them versatile for both light and dark mode designs.
To use Lottie in your own projects, include the lottie-web library via CDN or npm, prepare your animation JSON file (created with Adobe After Effects using the Bodymovin plugin), and initialize it with the configuration options that suit your needs.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / クレジットカード対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選