大厂h5开源视频系列-京东校招宣传

2019年9月10日 147次阅读来源: 旅梦飞起

前言

大厂h5开源视频系列 是一个专题，在这个专题中我们会解析一些酷酷的线上h5,在每一个细节，每一个细腻的过渡背后都能看到前端工程师付出的心血，本篇带来的是👉👉 京东校招宣传

线上链接请戳👉👉
京东校招宣传
小伙伴们可以自行感受一下，每一屏的动画加上背景音乐是不是让你不由自主的 WANNA DAN DAN DAN DAN DANCE，

就想一心投入京东物流事业（送快递的）行业中。

我们一起学习一下这个h5里面比较有意思的几个部分

学完之后希望大家早日能去和东哥做兄弟😬

loading 部分

每个h5的loading,为了减少用户焦虑，各家可谓是费劲心思，最常见的有转圈，进度条…
《大厂h5开源视频系列-京东校招宣传》
分析：

一个长方体上下运动,左右旋转
周围竖线从上往下运动

我们先构造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 页面

《大厂h5开源视频系列-京东校招宣传》
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;
  }
}

后续几屏都是以快为主题的场景页面

这几屏有几个特点，一个快字，一个宣传语，多是布局

《大厂h5开源视频系列-京东校招宣传》
里面的数字滚动，作者采用了

odometer 一个数字滚动的css/js库
外加一个自定义的字体

这里就不过多介绍

燃这个主题页

《大厂h5开源视频系列-京东校招宣传》
分析：

文字从右往左依次淡入
两根立体柱子的倾斜方向运动

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可以做到

第二部分，立体柱子怎么做的呢？

《大厂h5开源视频系列-京东校招宣传》
柱体：是一个背景渐变

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);
    }
}