*https://lottiefiles.com/blog/working-with-lottie/how-to-add-lottie-animation-in-web-page
https://lottiefiles.com/web-player
< figure > ตามหลักการของภาษา HTML แล้ว หมายถึง การแสดงให้เห็นเป็นภาพ ส่วน < figcaption > นั้น คือ การอธิภายสิ่งที่เป็นภาพนั้นเพิ่มเติม
The new industry standard Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime.
Get your beautiful animations into any web page, just by pasting in a snippet of code.
So you have a webpage or web app that you’d like to spruce up by taking advantage of the super small file size and resolution independent rendering enabled by the Lottie animation format. You may have got an animator to create a bespoke animation for you and exported it out from After Effects using the free LottieFiles for After Effects extension. Or you may have browsed through the 1000s of free Creative Commons licensed animations on the LottieFiles website and decided to use one of them. You may even have taken one of those animations and customised the animation to suit your needs and website using the free LottieFiles Editor.
You’ve got the Lottie or dotLottie format file. Let’s get started on adding it to your webpage. You can use this approach on any webpage, blog or platform that lets you edit HTML.
It’s a three step process.
LottieFiles maintains the < lottie-player > web component that enables using our custom web component to easily add a Lottie player anywhere on your webpage. To add the web component, you need to grab the script URL to the player and add it to thesection of your page HTML (or anywhere on the page)
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
There are a couple of ways to get the URL of the animation.
If you have made or downloaded a Lottie animation and would like to host it on your own website, upload the Lottie (dotLottie or JSON) file to your website using the media/file manager that you use and get its URL.
If you are using a community made animation on LottieFiles, we provide you a public link to the Lottie file that you can use.
เพิ่มตัว control โดยใส่คำว่า "controls" ในTag Player -----------Once you have the URL, copy and paste the below code into your webpage or web app’s HTML where you would like it to appear. Replace the
<lottie-player src="" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>
That’s it! Save and preview your page to see the animation.
The < lottie-player > web component provides a bunch of options to refine and control how you would like the animation to appear on your page. You can use these options in addition to using the usual HTML styling options to control the appearance of the player.
The < lottie-player > can be customized using the following attributes:
Background: Set the background color of the animation stage. Set it as transparent to let the player show through whatever is on the background of your page. This is a great default setting. You can set the background attribute to a valid HTML color attribute like “white” or a hexademical color value like “#FFFFFF” to set the background color.
Speed: Set the playback speed. 1 is the default speed as intended by the animator. You can have values smaller than 1 to slow it down. For example, a speed value of 0.5 will slow down the animation by half. Values greater than 1 can be used to speed up playback. For example, a value of 2 will play the animation at twice the speed. You can also use fractional values like 0.75 or 1.5 to tune the speed to your liking.
Loop: Adding this attribute makes the animation play forever by looping. Without this attribute, the animation will play once and stop.
Controls: Adding this attribute makes the player show start, stop, pause and a seeker bar. Use of this attribute depends on your intended use for the animation. If you are using the animation as a design element, you would probably want to skip this attribute to not show the controls.
Autoplay: Adding this attribute makes the animation start playing automatically as soon as it is loaded. If you do not specify this attribute, you will have to use Javascript to instruct the player to start playing when you would like it to play.
You can customize the look of the player to match your website’s style and design using CSS. In addition to the normal CSS techniques you already use, the player makes it easier by exposing CSS variables to customize specific aspects of the player.
The player exposes the following CSS variables, you can override them by placing the styles anywhere on your page:
--lottie-player-toolbar-height This sets the toolbar height. The default value is 35px.
--lottie-player-toolbar-background-color This sets the toolbar background color. The default value is transparent.
--lottie-player-toolbar-icon-color This sets the toolbar icon color. The default value is #999.
--lottie-player-toolbar-icon-hover-color This sets the toolbar icon hover color. The default value is #222.
--lottie-player-toolbar-icon-active-color This sets the toolbar icon active color. The default value is #555.
--lottie-player-seeker-track-color This sets the seeker track color. The default value is #CCC.
--lottie-player-seeker-thumb-color This sets the seeker thumb color. The default value is rgba(0, 107, 120, 0.8).
For example, to change the seeker track and thumb color to orange colors:
<style>
lottie-player {
--lottie-player-seeker-track-color: #e48509;
--lottie-player-seeker-thumb-color: #ffcc00;
}
</style>
For more advanced features and documentation, checkout the Lottie Web-Player GitHub page.
Other cool things you can do is add interactivity to your animations. Some interactivity possibilities that you can achieve with your Lottie animations are available for you here.
You can use our Lottie Web Player page to quickly generate the code for the player and customise it’s appearance.
Enter the URL to your Lottie file and play around with the options until it is looking exactly like how you would like it to appear. Then generate the code and copy the code into your website’s HTML!
