features.html 9.9 KB

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