JDX01(2017):Travel World(2)

範例結果


各頁內容:

  • P1:一、【Banner】區,動畫應用
    • 練習1:【banner1】利用DIV,加入背景圖片完成動畫輪播
    • 練習2:【banner2】在Html結構中,加入多張圖片完成動畫輪播
  • P2:(續P1)練習3:sec4 動畫應用
  • P3:二、【.gotop】
    • 練習1:【.gotop】視窗置頂
    • 練習2:頁面捲動超過 > 400時, 【.gotop】 顯示
  •  P4:三、視窗捲動時,【nav】由透明加色彩,並logo變小
  •  P5:四、視窗捲動時,【section2】背景隨著移動
    • 練習1:JS設定 sec2 背景移動
    • 練習2:物件隨身在側滑鼠上
  • P7:五、Section1:當視窗捲動後,淡入/淡出效果
  • P8:六、nav 點選時,緩慢捲動至各頁動畫效果
    • 練習1: nav click移動至各頁
    • 練習2:捲動至該頁時,nav按鈕加化

一、【Banner】區

練習1:利用DIV,加入背景圖片完成動畫輪播

S1:Html結構

  <header>
    <div id="banner1"></div>
  </header>

S2:CSS美化

/* #banner1 ========================*/
#banner1{
  width: 100%;
  height: 500px;  /* 暫訂,加入JS 後移除 */
  background: url(../image/banner01.jpg) center center;
  background-size: cover;
}

S3:結合@keyframes

/* #banner1 ========================*/
#banner1{
  display: none;
  width: 100%;
 /* height: 500px;   暫訂,加入JS 後移除 */
  /* 移至animation中
      background: url(../image/banner01.jpg) center center;
      background-size: cover; 
  */
  animation: banner1An 3s infinite;
}
@keyframes banner1An{
  0%{background: url(../image/banner01.jpg) center center;background-size:cover;}
  30%{background: url(../image/banner02.jpg) center center;background-size:cover; }
  50%{background: url(../image/banner03.jpg) center center;background-size:cover;}
  75%{background: url(../image/banner04.jpg) center center;background-size:cover; }
  100%{background: url(../image/banner01.jpg) center center;background-size:cover; }
}

S4:第1階段 JS ,依螢幕現有寬度與照片比例,獲得高度後,代入【header】高度

S4-1:移除CSS中#banner1高度

S4-2:JS計算header高度

// 計算 header 高度
    var $winW = $(window).width();
    var $bannerH = $winW / (1920/560);
    //console.log($bannerH);
    $('#banner1').css('height',$bannerH);

S4-2:第2階段JS,因依螢幕RWD之下,【header】高度隨時調整

//畫面啟動執行,計算 header 高度
  Fn_bannerH();
 
//視窗RWD縮放時
  $(window).resize(function(){
      Fn_bannerH();
  }); //resize Fn end
  
//計算 header 高度
  function Fn_bannerH(){
      var $winW = $(window).width();
      var $bannerH = $winW / (1920/560);
      //console.log($bannerH);
      $('#banner1').css('height',$bannerH);
  }

練習2:在Html結構中,加入多張圖片完成動畫輪播

※練習1,利用display:none; 隱藏之

S1:html結構

  <header>
    <div id="banner1"></div>
    <div id="banner2">
      <img src="image/banner01.jpg" alt="banner01">
      <img src="image/banner02.jpg" alt="banner02">
      <img src="image/banner03.jpg" alt="banner03">
      <img src="image/banner04.jpg" alt="banner04">
      <img src="image/banner05.jpg" alt="banner05">
      <img src="image/banner06.jpg" alt="banner06">
    </div>
  </header>

S2:CSS美化,為照片輪播必須將圖片重疊在一起

/* #banner2 ========================*/
#banner2{
  position: relative;
  height: 500px;      /* 暫訂 加入JS 後移除*/
}
#banner2 img{
  /*display: block;      為了解圖片間有空隙後,即移除之 */
  width: 100%;
  position: absolute;
  left: 0; top: 0;
}

S3:結合@keyframes

為了動畫呈現順暢度,執行上,經驗建議

  • 影格0%至100%時間點,需所有圖片一起考量,而非以單一圖片思考
  • 承上,建議所有圖片動畫在各百分比時,即使無值也寫入,感覺比較順暢
  • 加上 linear 等速呈現
  • 記得  img 預設值【opacity:0】
#banner2 img{
  opacity:0;     /*補上*/
}

#banner2 img:nth-child(1){ animation: img1 10s infinite linear;}
#banner2 img:nth-child(2){ animation: img2 10s infinite linear;}
#banner2 img:nth-child(3){ animation: img3 10s infinite linear;}
#banner2 img:nth-child(4){ animation: img4 10s infinite linear;}
#banner2 img:nth-child(5){ animation: img5 10s infinite linear;}
#banner2 img:nth-child(6){ animation: img6 10s infinite linear;}
 
@keyframes img1{
  0%{opacity: 1;}
}
@keyframes img2{
  0%{opacity: 0;}
  20%{opacity: 1;}
}
@keyframes img3{
  0%{opacity: 0;}
  20%{opacity: 0;}
  40%{opacity: 1;}
}
@keyframes img4{
  0%{opacity: 0;}
  20%{opacity: 0;}
  40%{opacity: 0;}
  60%{opacity: 1;}
}
@keyframes img5{
  0%{opacity: 0;}
  20%{opacity: 0;}
  40%{opacity: 0;}
  60%{opacity: 0;}
  80%{opacity: 1;}
}
@keyframes img6{
  0%{opacity: 0;}
  20%{opacity: 0;}
  40%{opacity: 0;}
  60%{opacity: 0;}
  80%{opacity: 0;}
  100%{opacity: 1;}
}

S4: JS ,【header】高度計算與【練習1】相同,直接補入補入JS即可

S4-1:移除CSS中#banner2高度

S4-2:JS計算header高度,加入【#banner2】及【#view】區

//計算 header 高度
  function Fn_bannerH(){
      var $winW = $(window).width();
      var $bannerH = $winW / (1920/560);
      //console.log($bannerH);
      $('header>div').css('height',$bannerH);     /*補上*/
  }