features.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Ai_anchor_Demo</title>
  8. <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
  9. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  10. integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11. <link rel="stylesheet" href="./style.css">
  12. </head>
  13. <body>
  14. <div style="overflow: hidden;">
  15. <nav class="navbar navbar-expand-lg navbar-light d-block">
  16. <div class="container-fluid px-5">
  17. <!-- <a class="navbar-brand d-block d-md-none" href="index.html">AI Spokesgirl</a> -->
  18. <a class="navbar-brand" href="index.html"></a>
  19. <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
  20. data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
  21. aria-label="Toggle navigation">
  22. <span class="navbar-toggler-icon"></span>
  23. </button>
  24. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  25. <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
  26. <li class="nav-item dropdown">
  27. <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
  28. 中/En
  29. </a>
  30. <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
  31. <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
  32. <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
  33. </ul>
  34. </li>
  35. </ul>
  36. </div>
  37. </div>
  38. </nav>
  39. <div class="ai-spokesgril">
  40. <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 100px; margin-left: 15px;" href="./index.html">
  41. <img class="me-5" style="width: 60px; margin-right: 15px;" src="./img/home-button.png" alt="">
  42. AI Spokesgirl
  43. </a>
  44. </div>
  45. <section class="sec-features" id="sec-features">
  46. <div class="container text-center">
  47. <h2 class="features-title"><strong>4</strong><lan set-lan="html:feature">大特色</lan></h2>
  48. <div class="row" style="position: relative;">
  49. <img src="img/背景-橘霧.png" alt="" width="300px" class="features-orangel">
  50. <div class="col-xs-12 col-md-6 col-lg-6">
  51. <div class="features-imgfr">
  52. <video autoplay muted loop>
  53. <source src="img/官網1_加速.mp4" type="video/mp4">
  54. </video>
  55. </div>
  56. </div>
  57. <div class="col-xs-12 col-md-6 col-lg-6 features-col">
  58. <div class="features-block block-right">
  59. <span class="features-num">1</span>
  60. <div>
  61. <h3><lan set-lan="html:feature_no1_title1">輸入文字腳本及素材</lan><br><lan set-lan="html:feature_no1_title2">一鍵輸出合成影片</lan></h3>
  62. <ul class="features-list">
  63. <li set-lan="html:feature_no1_li1">只需等待數分鐘即產製完成</li>
  64. <li set-lan="html:feature_no1_li2">可上傳圖片或是影片作為背景</li>
  65. <li set-lan="html:feature_no1_li3">生成MP4檔</li>
  66. </ul>
  67. </div>
  68. </div>
  69. </div>
  70. </div>
  71. <div class="row" style="position: relative;">
  72. <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purpler">
  73. <div class="col-xs-12 col-md-6 d-block">
  74. <div class="features-imgfr">
  75. <video autoplay muted loop>
  76. <source src="img/官網2.mp4" type="video/mp4">
  77. </video>
  78. </div>
  79. </div>
  80. <div class="col-xs-12 col-md-6 features-col">
  81. <div class="features-block block-left">
  82. <span class="features-num">2</span>
  83. <div>
  84. <h3 set-lan="html:feature_no2_title">多位AI虛擬人物選擇</h3>
  85. <ul class="features-list">
  86. <li set-lan="html:feature_no2_li1">無人物肖像權問題</li>
  87. <li set-lan="html:feature_no2_li2">人物表情、動作自然</li>
  88. <li set-lan="html:feature_no2_li3">因應主題,選擇合適人物</li>
  89. </ul>
  90. </div>
  91. </div>
  92. </div>
  93. <div class="col-xs-12 col-md-6 d-md-block">
  94. <div class="features-imgfr">
  95. <video autoplay muted loop>
  96. <source src="img/官網2.mp4" type="video/mp4">
  97. </video>
  98. </div>
  99. </div>
  100. </div>
  101. <div class="row" style="position: relative;">
  102. <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purplel">
  103. <div class="col-xs-12 col-md-6">
  104. <div class="features-imgfr">
  105. <video autoplay muted loop>
  106. <source src="img/官網3.mp4" type="video/mp4">
  107. </video>
  108. </div>
  109. </div>
  110. <div class="col-xs-12 col-md-6 features-col">
  111. <div class="features-block block-right">
  112. <span class="features-num">3</span>
  113. <div>
  114. <h3 set-lan="html:feature_no3_title">投影片轉製為影片</h3>
  115. <ul class="features-list">
  116. <li set-lan="html:feature_no3_li1">輸入文字腳本及投影片連結
  117. <br>一鍵完成影片
  118. </li>
  119. <li set-lan="html:feature_no3_li2">生成MP4檔</li>
  120. </ul>
  121. </div>
  122. </div>
  123. </div>
  124. </div>
  125. <div class="row" style="position: relative;">
  126. <img src="img/背景-橘霧.png" alt="" width="300px" class="features-oranger">
  127. <div class="col-xs-12 col-md-6 d-block">
  128. <div class="features-imgfr">
  129. <video autoplay muted loop>
  130. <source src="img/官網4.mp4" type="video/mp4">
  131. </video>
  132. </div>
  133. </div>
  134. <div class="col-xs-12 col-md-6 features-col">
  135. <div class="features-block block-left">
  136. <span class="features-num">4</span>
  137. <div>
  138. <h3 set-lan="html:feature_no4_title">多語言支援</h3>
  139. <ul class="features-list">
  140. <li set-lan="html:feature_no4_li1">支援中英文內容</li>
  141. <li set-lan="html:feature_no4_li2">可加入字幕</li>
  142. </ul>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="col-xs-12 col-md-6 d-md-block">
  147. <div class="features-imgfr">
  148. <video autoplay muted loop>
  149. <source src="img/官網4.mp4" type="video/mp4">
  150. </video>
  151. </div>
  152. </div>
  153. </div>
  154. <button class="btn-dark"
  155. onclick="window.location.href=`https://video.choozmo.com/register.html`"><lan set-lan="html:try_it_out">立即開始</lan></button>
  156. </div>
  157. </section>
  158. </div>
  159. <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
  160. integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
  161. crossorigin="anonymous"></script>
  162. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
  163. integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
  164. crossorigin="anonymous"></script>
  165. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  166. <script src="js/lan.js"></script>
  167. <script>
  168. function debounce(func, wait = 20, immediate = true) {
  169. var timeout;
  170. return function() {
  171. var context = this, args = arguments;
  172. var later = function() {
  173. timeout = null;
  174. if (!immediate) func.apply(context, args);
  175. };
  176. var callNow = immediate && !timeout;
  177. clearTimeout(timeout);
  178. timeout = setTimeout(later, wait);
  179. if (callNow) func.apply(context, args);
  180. };
  181. };
  182. const featuresBlock = document.querySelectorAll('.features-block');
  183. const featuresRow = document.querySelectorAll('.sec-features .row');
  184. function checkSlide() {
  185. console.log('pass');
  186. featuresRow.forEach((block, i) => {
  187. // half way through the image
  188. const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
  189. console.log(slideInAt);
  190. console.log(block.offsetTop);
  191. // bottom of the image
  192. const isHalfShown = slideInAt > block.offsetTop;
  193. if (isHalfShown) {
  194. console.log('active');
  195. featuresBlock[i].classList.add('active');
  196. }
  197. });
  198. }
  199. window.addEventListener('scroll', debounce(checkSlide));
  200. </script>
  201. </body>
  202. </html>