choozmo
/
AI_Anchor_Demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ai_anchor_Features</title>

    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <link rel="stylesheet" href="./style.css">
</head>

<body>
<div style="overflow: hidden;">
    <div class="ai-spokesgril features-nav"> 
        <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 30px; margin-left: 15px;" href="./index.html">
            <img class="me-5" style="width: 50px; margin-right: 15px;" src="./img/圖片1.png" alt="">
            AI Spokesgirl
        </a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="list-style: none;font-size: 2rem;">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        中/En
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="padding: .5rem 0;">
                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en" style="padding: .5rem 0;font-size: 1.8rem;">English</button></li>
                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh" style="padding: .5rem 0;font-size: 1.8rem;">中文</button></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <section class="sec-features" id="sec-features">
        <div class="container text-center">
            <h2 class="features-title"><strong>4</strong><lan set-lan="html:feature">大特色</lan></h2>
            <div class="row" style="position: relative;">
                <img src="img/背景-橘霧.png" alt="" width="300px" class="features-orangel">
                <div class="col-xs-12 col-md-6 col-lg-6">
                    <div class="features-imgfr">
                        <video autoplay muted loop>
                            <source src="img/官網1_加速.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 col-lg-6 features-col">
                    <div class="features-block block-right">
                        <span class="features-num">1</span>
                        <div>
                            <h3><lan set-lan="html:feature_no1_title1">輸入文字腳本及素材</lan><br><lan set-lan="html:feature_no1_title2">一鍵輸出合成影片</lan></h3>
                            <ul class="features-list">
                                <li set-lan="html:feature_no1_li1">只需等待數分鐘即產製完成</li>
                                <li set-lan="html:feature_no1_li2">可上傳圖片或是影片作為背景</li>
                                <li set-lan="html:feature_no1_li3">生成MP4檔</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="position: relative;">
                <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purpler">
                <div class="col-xs-12 col-md-6 d-block">
                    <div class="features-imgfr">
                        <video autoplay muted loop>
                            <source src="img/官網2.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 features-col">
                    <div class="features-block block-left">
                        <span class="features-num">2</span>
                        <div>
                            <h3 set-lan="html:feature_no2_title">多位AI虛擬人物選擇</h3>
                            <ul class="features-list">
                                <li set-lan="html:feature_no2_li1">無人物肖像權問題</li>
                                <li set-lan="html:feature_no2_li2">人物表情、動作自然</li>
                                <li set-lan="html:feature_no2_li3">因應主題，選擇合適人物</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 d-md-block">
                    <div class="features-imgfr">
                        <video autoplay muted loop>
                            <source src="img/官網2.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
            <div class="row" style="position: relative;">
                <img src="img/背景-紫霧.png" alt="" width="300px" class="features-purplel">
                <div class="col-xs-12 col-md-6">
                    <div class="features-imgfr">
                        <video autoplay muted loop>
                            <source src="img/官網3.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 features-col">
                    <div class="features-block block-right">
                        <span class="features-num">3</span>
                        <div>
                            <h3 set-lan="html:feature_no3_title">投影片轉製為影片</h3>
                            <ul class="features-list">
                                <li set-lan="html:feature_no3_li1">輸入文字腳本及投影片連結
                                    <br>一鍵完成影片
                                </li>
                                <li set-lan="html:feature_no3_li2">生成MP4檔</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" style="position: relative;">
                <img src="img/背景-橘霧.png" alt="" width="300px" class="features-oranger">
                <div class="col-xs-12 col-md-6 d-block">
                    <div class="features-imgfr">
                        <video autoplay muted loop>
                            <source src="img/官網4.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 features-col">
                    <div class="features-block block-left">
                        <span class="features-num">4</span>
                        <div>
                            <h3 set-lan="html:feature_no4_title">多語言支援</h3>
                            <ul class="features-list">
                                <li set-lan="html:feature_no4_li1">支援中英文內容</li>
                                <li set-lan="html:feature_no4_li2">可加入字幕</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-xs-12 col-md-6 d-md-block">
                    <div class="features-imgfr">
                        <video autoplay muted loop>
                            <source src="img/官網4.mp4" type="video/mp4">
                        </video>
                    </div>
                </div>
            </div>
            <button class="btn-dark"
                onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></button>
        </div>
    </section>
</div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
    crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
    crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/lan.js"></script>
    <script>
    function debounce(func, wait = 20, immediate = true) {
          var timeout;
          return function() {
            var context = this, args = arguments;
            var later = function() {
              timeout = null;
              if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
          };
      };
      const featuresBlock = document.querySelectorAll('.features-block');
      const featuresRow = document.querySelectorAll('.sec-features .row');
      function checkSlide() {
        console.log('pass');
        featuresRow.forEach((block, i) => {
        // half way through the image
        const slideInAt = (window.scrollY + window.innerHeight) - block.offsetHeight / 2;
        console.log(slideInAt);
        console.log(block.offsetTop);
        // bottom of the image
        const isHalfShown = slideInAt > block.offsetTop;
        if (isHalfShown) {
          console.log('active');
          featuresBlock[i].classList.add('active');
        }
      });
      }
      window.addEventListener('scroll', debounce(checkSlide));
    </script>
</body>

</html>