第一區段#sec1 的 HTML 設計

  <section id="sec1">
    ..............................

    <div class="fly"></div>

    <img class="imgAni" src="images/page1-img1.png" alt="中央文字圖">
    <img class="imgAni" src="images/page1-img2.png" alt="平板">
    <img class="imgAni" src="images/page1-img3.png" alt="筆記本">
    <img class="imgAni" src="images/page1-img4.png" alt="手機">
    <img class="imgAni" src="images/page1-img5.png" alt="筆">
    <img class="imgAni" src="images/page1-img6.png" alt="咖啡杯">

  </section>    
        

第一區段#sec1 的 CSS 樣式設計

/* #sec1  ===================================================================== */

#sec1 .imgAni { position: absolute; height: auto }
#sec1 .imgAni:nth-of-type(1) { width: 25vw;  left:  50vw; top: 25vh; margin-left: -15vw; } /*文字*/
#sec1 .imgAni:nth-of-type(2) { width: 45vw;  left: -13vw; bottom: -35vh; } /*平板*/
#sec1 .imgAni:nth-of-type(3) { width: 45vw; right: -10vw; bottom: -45vh; } /*筆記本*/
#sec1 .imgAni:nth-of-type(4) { width: 25vw; right:  -3vw; bottom:   0vh; } /*手機*/
#sec1 .imgAni:nth-of-type(5) { width: 15vw; right:  20vw; bottom:   5vh; } /*筆*/
#sec1 .imgAni:nth-of-type(6) { width: 25vw;  left:  15vw; bottom: -15vh; } /*咖啡杯*/

#sec1 .imgAni.whs:nth-of-type(1) { width: 50vw; left: 50vw; top: 20vh; margin-left: -25vw; } /*文字*/
#sec1 .imgAni.whs:nth-of-type(2) { width: 65vw;  left: -25vw; bottom:  5vh; } /*平板*/
#sec1 .imgAni.whs:nth-of-type(3) { width: 65vw; right: -20vw; bottom:  2vh; } /*筆記本*/
#sec1 .imgAni.whs:nth-of-type(4) { width: 35vw; right:  -8vw; bottom: 20vh; } /*手機*/
#sec1 .imgAni.whs:nth-of-type(5) { width: 25vw; right:  20vw; bottom:  5vh; } /*筆*/
#sec1 .imgAni.whs:nth-of-type(6) { width: 45vw;  left:  10vw; bottom:  5vh; } /*咖啡杯*/

#sec1 .imgAni:nth-of-type(1) { animation: sec1ImgAni1 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /*文字*/
#sec1 .imgAni:nth-of-type(2) { animation: sec1ImgAni2 2.5s; } /*平板*/
#sec1 .imgAni:nth-of-type(3) { animation: sec1ImgAni3 2.5s; } /*筆記本*/
#sec1 .imgAni:nth-of-type(4) { animation: sec1ImgAni2 5.0s; } /*手機*/
#sec1 .imgAni:nth-of-type(5) { animation: sec1ImgAni3 5.5s cubic-bezier(0.86, 0, 0.07, 1); } /*筆*/
#sec1 .imgAni:nth-of-type(6) { animation: sec1ImgAni4 5.0s cubic-bezier(0.645, 0.045, 0.355, 1); } /*咖啡杯*/

/*文字*/
@keyframes sec1ImgAni1 {
  0% { transform: scale(0); }
  20% { transform: scale(0); }
}      
/*平板,手機*/
@keyframes sec1ImgAni2 {
  0% { transform: translate(-40vh, 80vh); }
  20% { transform: translate(-40vh, 80vh); }
}      
/*筆記本,筆*/
@keyframes sec1ImgAni3 {
  0% { transform: translate(40vh, 80vh); }
  40% { transform: translate(40vh, 80vh); }
}
/*咖啡杯*/
@keyframes sec1ImgAni4 {
  0% { transform: scale(0) rotate(0deg); }
  50% { transform: scale(0) rotate(0deg); }
  100% { transform: scale(1) rotate(360deg); }
}

/*飛機*/
.fly { background-image: url(images/titleImg1.png); width: 114px; height: 75px;
  position: absolute; right: -200px; top: 150px; animation: flyAni 12s infinite; z-index: 1;
}
@keyframes flyAni {
  50% { transform: translate(-200vw, 20vw); z-index: 1; background-image: url(images/titleImg1.png); width: 114px; height: 75px; }
  51% { z-index: 0; background-image: url(images/titleImg2.png); width: 98px; height: 116px; }
  100% { z-index: 0; background-image: url(images/titleImg2.png); width: 98px; height: 116px; }
}

#sec1 { overflow: hidden; padding: 0; }
        

加上程式判斷螢幕寬高比例來決定#sec1中影像的位置

    //檢查視窗寬高比例, 如果小於0.8則加上 whs 的class名稱=============================
    function checkWH(){
      if( $(window).width()/$(window).height() < 0.85 ){
        $('#sec1 .imgAni').addClass('whs');
      }else{
        $('#sec1 .imgAni').removeClass('whs');
      }
    }
    checkWH();  //馬上執行, 檢查視窗寬高比例
       
    //當視窗調整大小時=============================================================
    $(window).resize(function(){
      checkWH();  //馬上執行=>檢查視窗寬高比例
    });