大廠h5開源視訊系列-京東校招宣傳

旅夢開發團發表於2019-04-04

前言

大廠h5開源視訊系列 是一個專題，在這個專題中我們會解析一些酷酷的線上h5,在每一個細節，每一個細膩的過渡背後都能看到前端工程師付出的心血，本篇帶來的是?? 京東校招宣傳

線上連結請戳??京東校招宣傳小夥伴們可以自行感受一下，每一屏的動畫加上背景音樂是不是讓你不由自主的 WANNA DAN DAN DAN DAN DANCE，
就想一心投入京東物流事業（送快遞的）行業中。

我們一起學習一下這個h5裡面比較有意思的幾個部分

學完之後希望大家早日能去和東哥做兄弟?

loading 部分

每個h5的loading,為了減少使用者焦慮，各家可謂是費勁心思，最常見的有轉圈，進度條...

分析：

一個長方體上下運動,左右旋轉
周圍豎線從上往下運動

我們先構造html結構,一個立方體,如gif我們只要5個面，底部那個面是不需要的，加上四根豎線：

<div class="loading" id="J-loading">
    <div class="c-cube-1">
      <div class="c-cube">
        <div class="c-cube__side c-cube__side--front"></div>
        <div class="c-cube__side c-cube__side--back"></div>
        <div class="c-cube__side c-cube__side--right"></div>
        <div class="c-cube__side c-cube__side--left"></div>
        <div class="c-cube__side c-cube__side--top"></div>
      </div>
    </div>
    <div class="line line-1"></div>
    <div class="line line-2"></div>
    <div class="line line-3"></div>
    <div class="line line-4"></div>
    <p class="progress-text origin-font" id="J-progress-text">66%</p>
  </div>
複製程式碼

佈局中涉及的難點

立方體繪製主要還是運用 transform (rotateY, rotateX, translateZ) 把每個面平移旋轉之後固定在該放的位置
立方體邊框繪製:是紅色到白色漸變的，關鍵程式碼

border: 1px solid;
border-image: linear-gradient(#ff1224, rgba(255, 18, 36, 0)) 2 100%;
border-top: none;
border-bottom: none;
height: 5em;
width: 1em;
複製程式碼

重要屬性 border-image,這個屬性可以說是CSS3中的一員大將，還不瞭解的同學可以參考

鑫旭老師的 border-image 講解

佈局完了之後就到了我們的動畫：

立方體的上下運動我們只要控制 translateY方向上的位移就好,animation-direction：alternate 讓動畫正向反向播放。

.loading .c-cube-1 {
  animation: cube-up-down-1 .8s ease-in-out infinite alternate;
}
@keyframes cube-up-down-1 {
  0% {
    transform: translateZ(0)
 } to {
    transform: translate3d(0, -.4rem, 0)
}
}
複製程式碼

左右旋轉,設定的就是 rotateY

.loading .c-cube {
  animation: spin-cube-right 1.2s linear infinite;
}
@keyframes spin-cube-right {
  0% {
    transform: rotateX(-33.5deg) rotateY(45deg)
  }
  to {
    transform: rotateX(-33.5deg) rotateY(225deg)
  }
}
複製程式碼

第一屏 Slogon 頁面

html裡面放的是一句口號

<div class="slogon">這是一家以速度見長的公司</div>
複製程式碼

最終顯示給使用者看的是一個背景圖片，那麼文字哪裡去了呢？這裡作者使用了

text-indent: -133.32rem; 
複製程式碼

將文字縮排到了一個使用者看不到的地方，雖然看不到，但有利於 SEO。我們的 slogn(你很年輕理應更快)，從下往上淡入。注意：animation-fill-mode: both; 就是 forwards, backwards 的結合。

.p1.swiper-slide-active .slogon {
  animation: fadeInUp .5s .3s both;
}
@keyframes fadeInUp{
  0% {
    opacity: 0;
    transform: translate3d(0,100%,0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
複製程式碼

後續幾屏都是以快為主題的場景頁面

這幾屏有幾個特點，一個快字，一個宣傳語，多是佈局

裡面的數字滾動，作者採用了

odometer 一個數字滾動的css/js庫外加一個自定義的字型
這裡就不過多介紹

燃這個主題頁

分析：

文字從右往左依次淡入
兩根立體柱子的傾斜方向運動 html基本結構

<div class="swiper-slide p8">
        <div class="logo-ran">燃</div>
        <div class="text-slogon">
          更快到達你想要的未來
        </div>
        <div class="cube-cnt-2">
          <div class="cube-2">
            <span></span>
          </div>
        </div>
        <div class="cube-cnt-3">
          <div class="cube-3">
            <span></span>
          </div>
        </div>
        <div class="text-title">
          京東2018校園招聘
        </div>
        <div class="text-detail">
          招聘人群： 2018年畢業<br>
          全日制本科、碩士、博士
        </div>
        <div class="logo-jd">京東招聘</div>
</div>
複製程式碼

第一部分文字從右往左淡入,透明度的變化 + translateX方向的偏移

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(50%,0,0);
}
100% {
    opacity: 1;
    transform: none;
}
}
複製程式碼

那怎麼依次進入呢？

.p8.swiper-slide-active .logo-ran {
  animation: fadeInRight .5s .3s both;
}
.p8.swiper-slide-active .text-slogon {
  animation: fadeInRight .5s .4s both;
}
.p8.swiper-slide-active .text-title {
  animation: fadeInRight .5s .6s both;
}
.p8.swiper-slide-active .text-detail {
  animation: fadeInRight .5s .7s both;
}
複製程式碼

答案是：animation-delay可以做到

第二部分，立體柱子怎麼做的呢？

柱體：是一個背景漸變

background-image: linear-gradient(-90deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,0));
複製程式碼

HSLA 和 RGBA 一樣是兩種色彩模式，RGBA指的是“紅色、綠色、藍色、Alpha透明度，HSLA指的是“色調、飽和度、亮度、Alpha透明度” 。

柱頂：是一個正方形旋轉 + 傾斜

width: .70667rem;
height: .70667rem;
background-color: #fff;
transform: rotate(51deg) skew(20deg);
複製程式碼

這裡真的驚呆了，感嘆作者的構思巧妙，一個障眼法讓使用者看上去就像立體的柱子。同樣我們柱子傾斜移動也是需要用到 transform：translateY translateX

.cube-cnt-2 {
    animation: cube-cnt-1-anim 1.5s ease-in-out infinite alternate;
}
@keyframes cube-cnt-1-anim {
    0% {
        transform: translateZ(0);
    }
    100% {
        transform: translate3d(.10667rem,-.10667rem,0);
    }
}
複製程式碼