Use CSS3 to achieve barrage effect

This time I will bring you the use of CSS3 to achieve the barrage effect, and what are the precautions for using CSS3 to achieve the barrage effect. The following is a practical case, let’s take a look.

Recently, I need to implement barrage in a project. I have consulted various methods on the Internet. Finally, I feel that the effect achieved by transform+transition has the best performance on mobile devices. I tested it on iPhone6 ​​and Redmi 4, and no lag was seen. A sudden feeling. There is obvious lag on mobile devices using jquery's animate animation.

1. First create the barrage area

<p class="barrage">
<p class="mask">
<!--//弹幕内容-->
</p>
</p>
<input type="text" ng-model="data.comment"/>
<button ng-click="addDanmu()">说两句</button >

2.css

.webPage .barrage{width:100%;height:22%;position: absolute; bottom: 50px; background-color: transparent;pointer-events: none;}
.webPage .barrage .mask{width:100%;height:100%;background:transparent;z-index:100;}

Note: The above html and css are based on your own Just ask for it

3.js

$scope.data = {comment:''};
$scope.danmuCount = 5; //最大弹幕行数
$scope.danmus = ['1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565', '1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565']; //弹幕数据源
//创建弹幕区域
$scope.createDanmuContent = function () {
var height = 1 / $scope.danmuCount * 100 + '%';
for (var i = 0; i < $scope.danmuCount; i++) {
var item = &#39;<p style="width: 100%; height: &#39;+height+&#39;"></p>';
$('.mask').append(item);
}
 $scope.createDanmu ();
};
//开始弹幕绘制
$scope.createDanmu = function () {
var maxCount = 0;
if ($scope.danmus.length > $scope.danmuCount) {
 maxCount = $scope.danmuCount;
 } else {
maxCount = $scope.danmus.length;
}
var _left = window.screen.width;
for (var i = 0; i < maxCount; i++) {
var _lable = $("<p style=&#39;margin: 0;position: absolute;opacity:1;display:table;left: "+_left + &#39;px&#39;+&#39;;color:&#39;+$scope.getRandomColor()+"&#39;>"+$scope.danmus[i]+"</p>");
$(".mask p").each(function () {
//检测该区域是否绘制了弹幕
if ($scope.checkDanmu($(this))) {
$(this).append(_lable);
$scope.moveArray(i);
 i--;
return false;
}
});
}
$scope.init_barrage();
};
//将数组第一位放到最后一位,（因弹幕池内容太少，所以没删除已显示的弹幕）
$scope.moveArray = function (i) {
 var temp = $scope.danmus[i];
$scope.danmus.splice(i,1);
$scope.danmus.push(temp);
}
//判断content区域有没有弹幕
$scope.checkDanmu = function (el) {
return el.find('p').length == 0 ? true : false;
};
//获取随机颜色
$scope.getRandomColor = function () {
return '#' + (function(h){
return new Array(7 - h.length).join("0") + h
})((Math.random() * 0x1000000 << 0).toString(16))
};
//初始化弹幕参数
$scope.init_barrage = function () {
$(".mask p p").show().each(function() {
 var _moveLeft = window.screen.width+$(this).width();
var time = 100000 / $(this).width() + 5000;//弹幕滑动时间
$scope.addCssAnimate($(this),_moveLeft,time);
});
};
//添加弹幕动画
$scope.addCssAnimate = function (el,_moveLeft,time) {
el.css({
&#39;transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-webkit-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-webkit-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-moz-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-moz-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-ms-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-ms-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;
});
//当动画执行完毕后，将弹幕移到原处，更换弹幕文字，重新开始执行动画，相当于对原本弹幕的复用
$timeout(function () {
//判断弹幕池是否还有内容，如果没有则移除弹幕
if ($scope.danmus.length > 0) {
el.css({
'transform':'translateX(0px)',
'transition':'all 0ms linear',
'-webkit-transform':'translateX(0px)',
'-webkit-transition':'all 0ms linear',
'-moz-transform':'translateX(0px)',
'-moz-transition':'all 0ms linear',
'-ms-transform':'translateX(0px)',
'-ms-transition':'all 0ms linear'
});
$scope.resetAnimate(el);
} else {
el.remove();
}
},time);
};
//更换弹幕内容，重新开始弹幕动画
$scope.resetAnimate = function (el) {
el.html($scope.danmus[0]);
$scope.moveArray(0);
var _moveLeft = el.width() + screen.width;
var time = 100000 / el.width() + 5000;
$scope.addCssAnimate(el,_moveLeft,time);
};
//评论，添加弹幕
$scope.addDanmu = function () {
var text = $scope.data.comment;
if(text == ""){
return;
}
$scope.danmus.unshift(text);
};
$scope.createDanmuContent();

At this point, the function is basically implemented. To close the barrage, you only need to remove the barrage area, which is not mentioned in the article.

Logic: First create the number of lines of barrages based on $scope.danmuCount, then add barrages to each line and add corresponding animations. When an animation is completed, move the barrage back to its original position, replace the barrage content, and re-execute the animation, thus avoiding overlapping barrage. The execution time of each barrage animation is determined by the length of the barrage.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Unpopular CSS properties you don’t know

How to omit CSS custom text

The above is the detailed content of Use CSS3 to achieve barrage effect. For more information, please follow other related articles on the PHP Chinese website!