LOL狗年官網擼一波

今年過年的時候和小夥伴們看到了LOL的狗年活動官網。不得不感嘆，搞IT的看的和別人就是不一樣，別人看活動，我看設計、看特效,看完頭腦一熱，決定用原生js搞一波。。。。

抽了7、8天的空閒時間，搞的差不多了，在谷歌下顯示的還是可以的，其他瀏覽器的兼容性並沒有測試。

寫完之後收穫了很多，對於css屬性以及css3動畫的進一步學習以及應用，對原生js的練習、運用，加強了對於html標籤語義化的應用，避免過去對於div的魔性依賴。。。還有就是對於html佈局的新理解，自己寫的佈局到最後總是感覺沒有原版寫的好（難道是因爲我沒有設計的原因？？？），最後不得不感嘆有一個好的視覺設計師（美工）對於程序員是多麼滴重要

之前github地址放錯了。。。現已改正。覺得喜歡的可以給個starO(∩_∩)O

git源碼地址

仿寫地址

官網地址

注：

• 目前只對谷歌瀏覽器做了測試，並且沒有手機端界面，所以建議用pc端的chrom瀏覽
• 鑑於自己的服務器網速實在是比不起騰訊爸爸的，所以減少了很多資源（音頻，明星與你同樂模塊的三個視頻）,首次加載因爲服務器網速的原因，資源等待的時間要久一點
• 純粹個人興趣

一些知識點的總結

1.使用瀏覽器的navigator對象判斷當前是否是在手機端和微信端

function is_pc(){
    var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo","SymbianOS");  
    var info = navigator.userAgent;
    var len = os.length;
    for (var i = 0; i < len; i++) {
        if (info.indexOf(os[i]) > 0){
            return false;
        }
    }
    return true;
}
function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){
        return true; 
    }else{
       return false;
    }
}

2.減少if for在編程中的使用

    1.三元運算符
    2.if分支多的話改用switch
    3.使用短路判斷 &&、||
    if(XXX){
         test()
    }
    // 改動後
    XXX && test() 表示如果XXX爲真，返回test，否則返回XXX

    if(!XXX){
        test()
    }
    // 改動後
    XXX ||  test()表示如果XXX爲假，返回test，否則返回XXX

3.使用background做顏色漸變字體

    1.首先使用color設置hack，對於這些新的API，除了敬業的chrom，其他瀏覽器的支持性還不是很好。
    2.使用background-image顏色漸變linear-gradient來設置漸變屬性
    3.使用text-fill-color:transparent;來設置文字的填充顏色爲透明，當這個屬性聲明時，color將失效
    4.最後使用background-clip:text；聲明只顯示文字區域，就出現漸變色顏色的文字啦
    color: #ef8247;
     font-size:14px;
     background-image: linear-gradient(to right,#fee3b5,#f8bb87);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     te

     xt-fill-color:transparent;

4.始終讓元素保持居中或者垂直居中（在知道元素大小的情況下）

    1.首先使用position:absolute絕對定位。
    2.使用margin-left: -50%的寬度,margin-top:-50%的高度
    3.再使用left:50%的寬度,top:50%的高度即可實現界面縮小放大時元素始終垂直居中
    .bg1 .video{
      position: absolute;
      width: 1920px;
      height:900px;
      margin-left:-960px;
      left:50%;
    }

5.按鈕閃效果實現

    1.首先畫好按鈕。
    2.使用before僞元素繪製透明菱形的滑動方塊，閃的效果就是來自菱形的移動
    3.使用動畫讓菱形僞元素移動起來即可
    .first-page .bottom-btn span{
      display: block;
      height:40px;
      line-height:40px;
      overflow: hidden;
      margin:0 9px 0 7px;
      position: relative;
    }

    .first-page .bottom-btn  span:before{
      content: ' ';
      position: absolute;
      width:80px;
      height:350px;
      top:0;
      left:-150px;
      transform: skew(-25deg);
      background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
    }
    @keyframes leftToRight {
      0%{left:-150px;}
      100%{left:250px}
    }

6.transform屬性

    transform:rotate3d(x,y,z,d)
    這個比較好理解，3d旋轉，4個參數，分別對應x,y,z軸，類型是number，最後一個參數是旋轉的角度，最後旋轉的角度爲x*d,y*d,z*d,所以前面三個參數爲1時就正常旋轉角度，0時不旋轉

    transform:perspective

    1. perspective屬性設置鏡頭到元素平面的距離。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，鏡頭距離元素表面的位置是300像素。
    2. perspective-origin屬性規定了鏡頭在平面上的位置。默認是放在元素的中心。

7.好看的hover效果

    1.正常些元素屬性
    2.在元素hover的時候，使用before僞元素，給before僞元素添加動畫，使用opacity和scale進行實現

    @keyframes coruscate {
      0%{
        opacity:.3;
        transform: scale(1);
      }
      100%{
        opacity:0;
        transform: scale(1.2);
        display: none;
      }
    }

    .as-you-play .card-list  .card-3{
      position: absolute;
      background: url("../assets/spr_redpackage.png")no-repeat -340px -478px;
      width:392px;
      height:333px;
      top:-38px;
      left:800px;
    }

     .as-you-play .card-list  .card-3:hover:before{
      content: '';
      position: absolute;
      background: url("./assets/spr_redpackage.png")no-repeat -340px -478px;
      width:392px;
      height:333px;
      top:0px;
      left:0px;
      animation:coruscate .4s ease-in-out;
    }

8.上下移動效果的思路以及優化

一開始直接使用的onscroll函數對滾動事件進行監聽

方法體中的每個方法都對應頁面中每一個模塊的出現與消失的控制

後來發現這個方法問題比較大，每一次都是調用所有方法是一方面，另一方面，只要在高度之外，每次一次滾動都會removeActive，雖然界面上看沒有什麼變化，但是運算量一下就上來了，導致界面會有些卡頓感覺

經過一番思考，改成滾動到一定區域的高度時，在調用對應的方法

感覺應該還有不小的優化空間，後面繼續優化這一塊

9.第一頁上下滾動效果的優化

在官網中，第一頁到第二頁之間觸發滾動的時候會自動下滾或者上滾，本以爲這一塊會比較簡單，沒想到這裏纔是最費時間的地方，因爲沒有用JQ，所以很多方法都要自己實現

• 上下自動滾動的動畫已經對body和nav進行樣式設置

  • 首先將要滾動的高度除以每次滾動的高度，得出次數
  • 使用setInterval定時器每次滾動對應高度，知道循環到指定次數，清除這個定時器
  • 在滾動時吧body的padding-top設置爲142px,nav的定位方式改爲fixed

    function scrollTo945(){
        disabledMouseWheel();
        setTimeout(mouseWheel,500);
        document.getElementsByClassName('activity-nav')[0].style.position = 'fixed'
  
        setTimeout(function(){
          document.body.style.paddingTop = '142px';
        },50)
          var scrollTemp =  getScrollTop();
          var scrollHeight = scrollDownHeigh - scrollTemp;
          var len = Math.floor(scrollHeight/step),i=0;
          var first_length = scrollHeight % step
          clearInterval(timer)
          timer = setInterval(function(){
            if(i>len) return;
            i==0 ?  window.scrollTo(0,first_length) : window.scrollTo(0,i*step+first_length);
            i === len && clearTimerDown()
            i++;
          },10)
  
      }

• 注意點
  
  • 一開始選用的onscroll方法進行監聽，後來發現這個方法和全局控制各個模塊的方法相沖突，會引發比較多的BUG，所有後來換用了onmousewheel方法對滾動進行監聽
  • 每次觸發滾動事件時，需要把onmousewheel事件解綁，否則用戶再次觸發該事件時，會發生BUG
  • 對於body的padding-top的動畫時間設置和頁面滾動的動畫時間設置需要反覆的嘗試，找到一個比較平衡的點，這樣滾動的時候不會有太大的感覺