阅读 265

大厂h5开源视频系列-腾讯2012世界杯赛程魔方

前言

大厂h5开源视频系列

是一个专题,前两篇我们一起学习研究了京东,网易前端工程师对于h5的唯美细腻的态度,在这个专题中我们会解析一些酷酷的线上h5,在每一个细节,每一个细腻的过渡背后都能看到前端工程师付出的心血,本篇带来的是 👉👉 腾讯2012世界杯赛程魔方

该h5分了3部分视频

看视屏学习

第一集

第二集

第三集

欢迎关注以往的文章:

线上链接请复制地址查看(直接点击会被重定向的啦) 👉👉 [腾讯2012世界杯赛程魔方](sports.qq.com/isocce/worl…

当我第一次看到这个h5的时候,内心是...挖槽!(无奈老夫没文化,一句卧槽走天下!css的世界太美妙,要就整个花里胡哨)。其实css的世界就像衣服,没有不好看的衣服,只是我们会不会搭配的问题,我们先来看一眼腾讯的前端工程师的精心搭配写出来的魔方效果吧

和往常我们看到的不太一样,该h5使用了一个3D翻转切屏的效果,可谓有点意思,那么我们此次就来剖析一下这个酷酷的h5的实现方式

分解每一屏

第一屏(loading)

世界杯的loading做成这样像滚动的足球一样的设计,先给ui设计师加个鸡腿。这个loading页面的实现其实没有什么太复杂的操作,解析一下就是

  • 一个loading文字( 字体:font-family:Impact )
  • 两个方向和转速都不一样的圆环再带上阴影效果,(当然圆环作者是用50%border-radius并非图片)
  • 一截一截的颜色只要将盒子边框的颜色设置成不一样就可以实现

那么这两个圆转动的圈圈实现的方式我就直接贴上代码吧,相信小伙伴们一看就明白的

 <!--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最秀的地方

第二屏(赛程首页)

其实已经没有第三屏了,首页出来的那一刻所有屏都出来了,只是......只是出现的位置在后方了啦,来来来,我把底子翻给你看

看到这一首页出来的这一刻,其他页面此时在哪里,在干嘛,看!look!watch!see!

这是我将首页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:
        }
      }
    }
  })
复制代码

按道理来说这个h5没有什么很难的点,但是满满的都是细节和心血,大家写h5的时候可能较少会想到一些花里胡哨的效果,正如我们所说的,css没有太难理解的代码,只是我们不知道怎么去玩转它,之后我们就一起手拉手慢慢的来看大厂的开发是怎么666起来的吧!

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

该h5项目的完整源码会分享到群,声明:该h5代码由腾讯前端出品,我个人手拓学习版本,非商业用途,单纯为了学习交流

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