html5和css3实用Mobile手机app功能视频展示插件

2019-10-10 16:37:11 作者: 大梦 浏览: 71 [百度已收录] [搜狗已收录] [360已收录]

简要教程

使用video视频来展示效果是向用户介绍APP功能的最好的方法之一。大多数用户在下载一个APP之前都想了解该APP的具体功能。你可以使用一个APP截图来向用户说明,但是如果你通过一张GIF动画或视频动画来向用户展示APP,就会得到截然不同的效果。 Pinterest Messages 就是一个很好的例子。

在本教程里,我们将创建一个可定制的、响应式的Mobile手机app功能视频展示插件。

HTML结构

html结构包括两个主要的div:.cd-product-intro 和#cd-product-tour。第一个div包含app的介绍(标题和按钮等),第二个div用于展示app的视频内容。

APP视频展示是一个无序列表:每一个列表项都包含一个.cd-caption元素(标题)和一个.cd-image-container(视频)。

video文件不直接插入到html文档中,我们使用jQuery来调用它。

上面还有两个额外的div: .cd-slider-nav 用于做app视频介绍的前后导航;.cd-loader 用于作为加载进度条。

CSS样式

对于 小屏幕设备而言,这里的css样式时非常简单的。

在桌面设备上(分辨率大于1070像素),我们为.cd-product-intro定义:position: absolute和width: 50%,将介绍部分放在屏幕的左侧。

对于#cd-product-tour 元素,我们设置 width: 100% 和 left: 0 ,然后给它设置 translateX(75%) ,这样就只有手机的图片是可见的。

@media only screen and (min-width: 1070px) {
  .cd-product-intro {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    width: 50%;
    transition: transform 0.3s, opacity 0.3s;
  }
  #cd-product-tour {
    width: 100%;
    max-width: 850px;
    margin: 0 auto;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(75%);
    transition: transform 0.3s;
  }
}
下图向你展示了初始化时各个元素的位置:

html5手机app展示-1

当点击了开始按钮,我们将class .is-product-tour添加到.cd-single-item元素上:.cd-product-intro元素将被 translateX(-50%) (这样.cd-caption和.cd-image-container都将可见)。这里在transform上使用CSS3 transitions并添加透明度是为了使动画更加平滑。

对于li.cd-single-item元素,我们将其设置为position: absolute,width: 100%和left: 0 (使它们占有同样大小的空间),然后使用visibility 和opacity 来显示当前的活动元素。

@media only screen and (min-width: 1070px) {
  .cd-single-item {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    visibility: visible;
  }
  .cd-single-item.cd-not-visible {
    /*need to create a specific class to change visibility value due to a Firefox bug*/
    /*CSS transition/animation fails when parent element changes visibility attribute*/
    visibility: hidden;
  }
  .cd-single-item .cd-caption {
    width: 60%;
    float: right;
    opacity: 0;
    transition: transform 0.3s, opacity 0.3s;
  }
  .is-product-tour .cd-single-item.cd-active .cd-caption {
    opacity: 1;
  }
  .cd-single-item.cd-move-right .cd-caption {
    transform: translateX(100px);
  }
  
  .cd-image-container {
    width: 35%;
    float: left;
  }
  .cd-image-container img {
    transition: transform 0.3s;
    transform: translateZ(0);
  }
   .cd-move-right .cd-image-container img {
    transform: translateX(100%);
  }
}
注意:我们为body和html设置height: 100%是为了全屏显示。

JAVASCRIPT

APP的视频文件不是直接插入到html文件中的,它们在相应的滑动内容第一次加载时被调用。data-video用于存放当前视频文件的url。这里使用两种格式的视频文件:.mp4 和 .webm。当视频文件被插入html,进度条开始加载动画。当视频文件可以播放的时候(canplaythrough事件被触发),进度条动画结束,视频开始播放。

function uploadVideo(selected) {
  // selected is the .cd-single-item.cd-active slider element
  selected.siblings('.cd-single-item').find('video').each(function(){
    //pause videos user is not watching
    $(this).get(0).pause();
  })
  if(selected.find('video').length > 0) {
    //video has been already loaded - play it
    selected.find('video').eq(0).show().get(0).play();
  } else {
    //load video - the name of the video is the data-video of the image
    var videoUrl = selected.find('.cd-image-container img').data('video'),
      video = $('');
    video.appendTo(selected.find('.cd-image-wrapper')).hide();
  
    var loaded = 'false';
    //check if the canplaythrough event occurs - video is ready to be played
    selected.on('canplaythrough', 'video', function() {
      loaded = 'true';
    });
  
    //animate the loading bar
    $('.cd-loader').show().animate({width: '50%'}, 1500, function(){
      var timeout = setInterval(function(){
        if( loaded ){
          //this means the video is ready - complete .cd-loader and play the video
          $('.cd-loader').animate({width: '100%'}, 100, function(){
            $('.cd-loader').css('width', 0);
            selected.find('video').show().get(0).play();
            selected.find('img').css('opacity', 0);
            clearInterval(timeout);
          });
        } else {
          //video is not ready yet
          var windowWidth = $(window).width(),
            widthNew = $('.cd-loader').width() + 10;
          if(widthNew < windowWidth ) {
            $('.cd-loader').show().animate({width: widthNew+'px'}, 500);
          }
        }
      }, 500);
    });     
  }
}
注意:仔细观察代码,你会发现视频文件的宽高比大于1(宽度>高度)。视频文件被插入到html中,然后使用CSS3 rotation 将其旋转90度。是为了适应2014-12-8 16:30:45设备的屏幕。实际上,我们刚开始的时候使用视频文件的宽高比小于1,但是在IE9+浏览器中显示不正常。

版权免责声明 1、本网站名称:罗网云集-支付之家!
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站Potato土豆群:请先加好友啦你进群:dizhus —potato是一款不用翻墙的聊天软件
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的