阅读 4841

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

前言

大厂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);
    }
}
复制代码

招聘流程

这一屏的实现基本如上面所讲的,文字依次淡入,这里小伙伴们不妨自己尝试一下。

如上便是这几屏的分析。 EOF 全文完👏。

源码

这里把 loading 页面和其他页面分开

loading页面戳此

其他页面戳此

你可在 github上获取源码 你可以跟着 开源视屏 一步步实现, 有任何问题可以加入文末群聊交流。

预告

下篇我们将带来 网易云音乐2018年度总结 的分享,内容依旧精彩。

大家在学习的时候是不是只单独知道每个css属性,综合例子没有思路,不知道怎么动手,快快结合上面的讲解动起手来。

欢迎关注本系列文章,有问题可以加入👇👇👇群聊和我一起讨论。

关注下面的标签,发现更多相似文章
评论