choozmo
/
AI_Anchor_Demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!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_Demo</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;">
    <!-- <section  class="sec01">
        <div class="card border-0">
            <img src="./img/T1.png" class="card-img img-fluid" alt="...">
            <div class="card-img-overlay pb-0">
             
            </div>
        </div>
    </section> -->
    <div class="ai-spokesgril"> 
        <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 100px; margin-left: 15px;" href="./index.html">
            <img class="me-5" style="width: 60px; margin-right: 15px;" src="./img/home-button.png" alt="">
            AI Spokesgirl
        </a>
    </div>
    <section class="sec-features" id="sec-features">
        <div class="container text-center">
            <h2 class="features-title"><strong>4</strong>大特色</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>輸入文字腳本及素材<br>一鍵輸出合成影片</h3>
                            <ul class="features-list">
                                <li>只需等待數分鐘即產製完成</li>
                                <li>可上傳圖片或是影片作為背景</li>
                                <li>生成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>多位AI虛擬人物選擇</h3>
                            <ul class="features-list">
                                <li>無人物肖像權問題</li>
                                <li>人物表情、動作自然</li>
                                <li>因應主題，選擇合適人物</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>投影片轉製為影片</h3>
                            <ul class="features-list">
                                <li>輸入文字腳本及投影片連結
                                    <br>一鍵完成影片
                                </li>
                                <li>生成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>多語言支援</h3>
                            <ul class="features-list">
                                <li>支援中英文內容</li>
                                <li>可加入字幕</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="window.location.href=`https://video.choozmo.com/register.html`">立即開始</button>
        </div>
    </section>
</div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
        <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>
        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></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>