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

時間 2019-11-07

標籤大廠 h5 開源視頻系列京東宣傳简体版

原文原文鏈接

前言

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

線上連接請戳👉👉京東校招宣傳小夥伴們能夠自行感覺一下，每一屏的動畫加上背景音樂是否是讓你不禁自主的 WANNA DAN DAN DAN DAN DANCE， html

就想一心投入京東物流事業（送快遞的）行業中。

咱們一塊兒學習一下這個h5裏面比較有意思的幾個部分

學完以後但願你們早日能去和東哥作兄弟😬前端

loading 部分

每一個h5的loading,爲了減小用戶焦慮，各家可謂是費勁心思，最多見的有轉圈，進度條... css3

分析：

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

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

<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>
複製代碼

佈局中涉及的難點github

立方體繪製主要仍是運用 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中的一員大將，還不瞭解的同窗能夠參考bash

鑫旭老師的 border-image 講解前端工程師

佈局完了以後就到了咱們的動畫：dom

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

.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);
    }
}
複製代碼