直播评论滚动到上面渐隐特效

最新推荐文章于 2023-09-04 23:29:53 发布

置顶喵大叔、

最新推荐文章于 2023-09-04 23:29:53 发布

阅读量2k

点赞数 4

分类专栏：小程序日常积累文章标签： html css

本文链接：https://blog.csdn.net/weixin_43990297/article/details/109572879

版权

日常积累同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

小程序

4 篇文章 0 订阅

订阅专栏

大家都在看直播的时候看那个评论区评论，到顶部的时候会渐隐消失（如下图），现在小程序或者H5做直播或者视频播放的时候，也要实现该功能，那怎么实现呢，主要用了`mask ，-webkit-mask-image`这个css属性。

在这里插入图片描述
下面写了个小demo，供大家参考，如果是小程序端那自行替换标签，使用cover-view。评论区文字滚动当成轮播就行了，列子中视频地址自己更换成自己的（自己拿手机拍个视频放自己电脑上就行了）

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>实现直播间消息评论滚动，顶部消失效果， 用浏览器的手机模式开打， 最好360浏览器可以自动播放</title>
  <style type="text/css">
    *{margin:0;padding:0;list-style: none;}
    .box{
      width:100%;
      height:100%;
      position: relative;
    }
    .mask{
      height: 500px;
      overflow:hidden;
      position: absolute;
      bottom: 100px;
      left: 0;
      -webkit-mask-image:linear-gradient(transparent,#fff);
    }
    .item{
      max-width: calc(70% - 60px);
      margin-left: 60px;margin-bottom:30px;box-sizing: border-box;
    }
    .item div {
      font-size: 2.1rem;
      color: white;
      box-sizing: border-box;
      border-radius: 2rem;
      padding: .8rem 1.5rem;
      background:rgba(0,0,0,0.4);
      display: inline-block;
    }
    /*object-fit:fill;让视频撑满整个容器高度*/
   #plvideo {width: 100%;object-fit:fill;height: 100%;}
  </style>
</head>
<body>
<div class="box">
  <video src="./1.mp4" autoplay="autoplay" loop="loop" id="plvideo"></video>
  <!--模拟消息区-->
  <div class="mask" id="content">
    <ul class="msg1" id="msg1">
      <li class="item"><div>哈哈哈哈哈哈哈哈哈哈哈哈大苏打实打实打算</div></li>
      <li class="item"><div>嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</div></li>
      <li class="item"><div>订单</div></li>
      <li class="item"><div>666</div></li>
      <li  class="item"><div>哇哇哇哇哇哇哇</div></li>
      <li class="item"><div>呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱</div></li>
      <li class="item"><div>的速度速度速度速度速度速度</div></li>
      <li class="item"><div>帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆</div></li>
      <li class="item"><div>不啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵</div></li>
      <li class="item"><div>不不不</div></li>
      <li class="item"><div>vv</div></li>
      <li class="item"><div>vcv</div></li>
      <li class="item"><div>111111</div></li>
      <li class="item"><div>222</div></li>
      <li class="item"><div>333</div></li>
      <li class="item"><div>666</div></li>
      <li  class="item"><div>哇哇哇哇哇哇哇</div></li>
      <li class="item"><div>呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱</div></li>
      <li class="item"><div>的速度速度速度速度速度速度</div></li>
      <li class="item"><div>帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆帆</div></li>
      <li class="item"><div>不啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵</div></li>
      <li class="item"><div>不不不</div></li>
      <li class="item"><div>vv</div></li>
      <li class="item"><div>vcv</div></li>
      <li class="item"><div>111111</div></li>
      <li class="item"><div>222</div></li>
      <li class="item"><div>333</div></li>
    </ul>
    <ul id="msg2"></ul>
  </div>
</div>
<script>
  // 消息滚动区的计算
  var content=document.getElementById("content");
  var msg1=document.getElementById("msg1");
  var msg2=document.getElementById("msg2");
  var liHeight = 50;
  var speed = 10;//滚动的速度
  msg2.innerHTML=msg1.innerHTML;
  var delay = 10;
  var time;
  content.scrollTop=0;
  function startScroll(){
    time = setInterval(upScroll,speed);
    content.scrollTop++;
  };
  function upScroll(){
    if(content.scrollTop % liHeight==0){
      clearInterval(time);
      setTimeout(startScroll,delay);
    }else{
      content.scrollTop++;
      if(content.scrollTop >= content.scrollHeight/2){
        content.scrollTop =0;
      }
    }
  }
  setTimeout(startScroll,delay)
</script>
</body>
</html>

最终效果如下
在这里插入图片描述

喵大叔、

关注

4
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
直播评论滚动到上面渐隐特效

大家都在看直播的时候看那个评论区评论，到顶部的时候会渐隐消失（如下图），现在小程序或者H5做直播或者视频播放的时候，也要实现该功能，那怎么实现呢，主要用了mask ，-webkit-mask-image这个css属性。下面写了个小demo，供大家参考，如果是小程序端那自行替换标签，使用cover-view。评论区文字滚动当成轮播就行了，列子中视频地址自己更换成自己的（自己拿手机拍个视频放自己电脑上就行了）<!doctype html><html lang="en">&lt
复制链接

扫一扫