index.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="UTF-8">
  5. <style>
  6. body, html{
  7. background-color:#ccc;
  8. margin: 0px;
  9. height: 100%;
  10. overflow-x: hidden;
  11. overflow-y: auto;
  12. }
  13. #pusher{
  14. background-color:#ccc;
  15. width:100%;
  16. height:0%;
  17. display:block;
  18. overflow: hidden;
  19. transform: translate3d(0,0,0);
  20. /*display:none;*/
  21. }
  22. #lottie{
  23. background-color:#ccc;
  24. width:100%;
  25. height:100%;
  26. display:block;
  27. overflow: hidden;
  28. transform: translate3d(0,0,0);
  29. /*display:none;*/
  30. }
  31. </style>
  32. <!-- build:js lottie.js -->
  33. <!-- end Expressions -->
  34. <!-- endbuild -->
  35. <!-- <script src="js/module.js" type="module"></script> -->
  36. <!-- <script src="lottie.js"></script> -->
  37. <!-- <script src="bodymovin_light.js"></script> -->
  38. </head>
  39. <body>
  40. <div id="pusher"></div>
  41. <div id="lottie"></div>
  42. <script>
  43. var anim;
  44. import('./js/modules/full.js').then(({default: lottie }) => {
  45. var elem = document.getElementById('lottie');
  46. var animData = {
  47. container: elem,
  48. renderer: 'svg',
  49. loop: 3,
  50. autoplay: true,
  51. rendererSettings: {
  52. progressiveLoad:false,
  53. preserveAspectRatio: 'xMidYMid meet',
  54. imagePreserveAspectRatio: 'xMidYMid meet',
  55. title: 'TEST TITLE',
  56. description: 'TEST DESCRIPTION',
  57. filterSize: {
  58. width: '500%',
  59. height: '500%',
  60. x: '-200%',
  61. y: '-200%',
  62. }
  63. },
  64. path: 'exports/render/data.json',
  65. audioFactory: createAudio,
  66. };
  67. // lottie.setQuality('low');
  68. // anim.setSpeed(0.5)
  69. // lottie.useWebWorker(true);
  70. window.lottie = lottie;
  71. setTimeout(() => {
  72. anim = lottie.loadAnimation(animData);
  73. anim.setSubframe(false);
  74. anim.onError = function(errorType, nativeError, errorProps) {
  75. console.log(errorType)
  76. }
  77. anim.addEventListener('error', function(error) {
  78. console.log(error)
  79. })
  80. anim.addEventListener('error', function(error) {
  81. console.log(error)
  82. })
  83. anim.addEventListener('DOMLoaded', function() {
  84. // setTimeout(()=>{
  85. // console.log('UPDATEING TEXT');
  86. // anim.updateDocumentData(['a_text','adwqd'], {t: 'eeee'});
  87. // }, 100)
  88. })
  89. }, 1)
  90. });
  91. // setTimeout(()=>anim.destroy(), 1000);
  92. function createAudio(assetPath) {
  93. return new Howl({
  94. src: [assetPath]
  95. })
  96. }
  97. </script>
  98. </body>
  99. </html>