大廠h5開源視頻系列-騰訊2012世界盃賽程魔方

時間 2019-12-05

標籤大廠 h5 開源視頻系列騰訊世界盃賽程欄目騰訊简体版

原文原文鏈接

前言

大廠h5開源視頻系列css

是一個專題，前兩篇咱們一塊兒學習研究了京東，網易前端工程師對於h5的惟美細膩的態度，在這個專題中咱們會解析一些酷酷的線上h5,在每個細節，每個細膩的過渡背後都能看到前端工程師付出的心血，本篇帶來的是 👉👉 騰訊2012世界盃賽程魔方html

該h5分了3部分視頻前端

看視屏學習

第一集

第二集

第三集

歡迎關注以往的文章：git

線上連接請複製地址查看（直接點擊會被重定向的啦） 👉👉 [騰訊2012世界盃賽程魔方]（sports.qq.com/isocce/worl…github

當我第一次看到這個h5的時候，心裏是...挖槽！（無奈老夫沒文化，一句臥槽走天下！css的世界太美妙，要就整個花裏胡哨）。其實css的世界就像衣服，沒有很差看的衣服，只是咱們會不會搭配的問題，咱們先來看一眼騰訊的前端工程師的精心搭配寫出來的魔方效果吧web

和往常咱們看到的不太同樣，該h5使用了一個3D翻轉切屏的效果，可謂有點意思，那麼咱們這次就來剖析一下這個酷酷的h5的實現方式

分解每一屏

第一屏（loading）

世界盃的loading作成這樣像滾動的足球同樣的設計，先給ui設計師加個雞腿。這個loading頁面的實現其實沒有什麼太複雜的操做，解析一下就是

一個loading文字( 字體：font-family:Impact )
兩個方向和轉速都不同的圓環再帶上陰影效果，(固然圓環做者是用50%的border-radius並不是圖片)
一截一截的顏色只要將盒子邊框的顏色設置成不同就能夠實現

那麼這兩個圓轉動的圈圈實現的方式我就直接貼上代碼吧，相信小夥伴們一看就明白的bash

<!--loading -->
    <div class="load" style="display:block;">
      <div class="loadImg">
        <div class="loadTxt">loading</div>
        <div class="circle"></div>
        <div class="circle1"></div>
      </div>
    </div>
複製代碼

.circle{
  background-color: rgba(0,0,0,0);
  border: 5px solid rgba(251,241,107,0.9);
  opacity: .9;
  border-right-color: rgba(0,0,0,0);
  border-left-color: rgba(0,0,0,0);
  box-shadow: 0 0 30px #fbf49a;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 50%;
  animation: spinPulse 1s infinite linear;
}

.circle1{
  background-color: transparent;
  border: 5px solid rgba(251,241,107,1);
  opacity: .9;
  border-right-color: rgba(0,0,0,0);
  border-left-color: rgba(0,0,0,0);
  box-shadow: 0 0 15px #fbf49a;
  width: 30px;
  height: 30px;
  margin: 0 auto;
  position: relative;
  top: -50px;
  border-radius: 50%;
  animation: spinoffPulse 1s infinite linear;
}
/* 外層圓 */
@keyframes spinPulse {
  0%{
    -webkit-transform: rotate(160deg);
            transform: rotate(160deg);
    opacity: 0;
    box-shadow: 0 0 1px #2187e7;
  }
  50%{
    -webkit-transform: rotate(145deg);
            transform: rotate(145deg);
    opacity: 1;
  }
  100%{
    -webkit-transform: rotate(-320deg);
            transform: rotate(-320deg);
    opacity: 0;
  }
}
/* 內層圓 */
@keyframes spinoffPulse {
  0%{
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
複製代碼

OK吧，分別寫兩個動畫，一些加前綴的兼容性代碼沒有貼出來，免得看的不清爽。接着纔是這個h5最秀的地方前端工程師

第二屏（賽程首頁）

其實已經沒有第三屏了，首頁出來的那一刻全部屏都出來了，只是......只是出現的位置在後方了啦，來來來，我把底子翻給你看app

看到這一首頁出來的這一刻，其餘頁面此時在哪裏，在幹嗎，看！look！watch！see！post

這是我將首頁display:none掉的效果，哇！又想說一句臥槽！原來是這樣的，其餘頁面所有都出如今同一屏裏面只是悄悄躲在了後面，並被首頁遮擋了而已，看這些頁面的擺放位置是很講究的

首先就是將全部的頁面都裝在同一個容器裏，而後將這個容器往Z軸向裏平移一個距離

接着再每一個頁面都給定一個初始的狀態，上放下方前方的頁面又都讓其平移出來

transform: translateZ(333.5px)
複製代碼

因而只有一個頁面的位置都處在上圖（ABCDEFGH）這個頁面的位置，也就是往咱們的窗口朝裏面移了333.5像素

接着給咱們須要給最裏面的那個頁面一個

transform: rotateX(180deg)
複製代碼

而後上面的頁面再給一個

transform: rotateX(-270deg)
複製代碼

下面的頁面給一個

transform: rotateX(-90deg)
複製代碼

冷靜：這裏給裏面的頁面一個繞X軸旋轉180度，想象一下一個正方體，咱們要讓正方體背面（咱們看不到的）的那個面以翻轉的效果出現到正前方，可不就是須要先把它頭尾倒轉嘛。。。同理，咱們上下兩個面須要翻轉到正前方保證頁面正常顯示，可不就是要先給上下頁面一個rotateX嘛！

滑屏事件

做者採用了一個第三方的滑屏插件alloyTeam開源的alloyFinger來實現的監聽手指的滑動

簡單介紹一下alloyFinger的用法，點上方的alloyFinger，到github上就能下載alloy的庫，下載到項目中，在咱們的項目中引入這個包

<script src="./lib/alloy_finger/alloy_finger.js"></script>
複製代碼

var screen = document.querySelector('.screen'); // 獲取頁面上當前正前方的那個面（每一個面翻轉到正前方的時候做者都手動給其加了一個screen的類名）
  var gesture = new AlloyFinger(screen,{ // 執行滑屏事件
    swipe:function(evt){
      var direction = evt.direction;
      var current = getCurrentPage();
      if (direction == "Up") { // 監測手指上滑
        switch (current) {
          case 0:$('.btn1').click();break; // 這裏三個是首頁的按鈕點擊事件
          case 1:$('.btn2').click();break; // 點擊這三個按鈕也執行頁面的翻轉
          case 2:$('.btn3').click();break; // 嘿嘿
          case 3:$('.screen').attr("class","screen ease");break;
          default:
        }
      }else if (direction == "Down"){ // 監測手指下滑
        switch (current) {
          case 0:return;
          case 1:$('.screen').attr("class","screen ease");break;
          case 2:$('.btn1').click();break;
          case 3:$('.btn2').click();break;
          default:
        }
      }
    }
  })
複製代碼