Example CSS3 realization of the bomb screen

The project needs to implement the barrage, on-line reference to a variety of methods, and finally feel transform+transition achieve the best performance on mobile devices, in the iphone6 and Red Rice 4 test, do not see the feeling of the lag. Animate animations with jquery have a noticeable lag on mobile devices. This article mainly introduces the CSS3 implementation of the sample code, small series feel very good, and now share to everyone, but also for everyone to do a reference. Follow the small series together to see it, hope to help everyone.

1. First create a barrage area

<p class= "barrage" ><p class= "Mask" ><!--//bounce content--></p></p><input type= "text" Ng-model= "Data.comment"/><button ng-click= "Adddanmu ()" > Say two sentences </button >

2.css

. webpage. barrage{width:100%;height:22%;p osition: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,css according to their own needs to be able to

3.js

$scope. data = {comment: '}; $scope. Danmucount = 5; Maximum barrage line number $scope.danmus = [' 1545466666 or ', ' 9777777 ', ' hahaha haha ', ' to the enterprise after reading the global network good Qi ha ', ' 42115 i I i 5 ', ' 556 oh oh oh, 45 ', ' 54 oh ', ' 54545646 ', ' 666 but near Time 66 ', ' 56565 ', ' 454465465565 ', ' 1545466666 or ', ' 9777777 ', ' hahaha haha ', ' to the enterprise after reading the global network good Qi ha ', ' 42115 i I i 5 ', ' 556 Oh oh oh ooh 45 ', ' 54 oh ', ' 54545646 ', ' 666 but near Time 66 ', ' 56565 ', ' 454465465565 ']; Bullet screen Data source//Create a barrage area $scope.createdanmucontent = function () {var height = 1/$scope. Danmucount * + '% '; for (var i = 0; I & Lt $scope. Danmucount; i++) {var item = ' <p style= ' width:100%; height: ' +height+ ' "></p> '; $ ('. Mask '). Append (item);} $ Scope.createdanmu ();};/ /start the barrage draw $scope.createdanmu = function () {var maxCount = 0;if ($scope. danmus.length > $scope. danmucount) {MaxCount = $s Cope.danmucount; } else {maxCount = $scope. danmus.length;} var _left = Window.screen.width;for (var i = 0; i < MaxCount; i++) {var _lable = $ ("<p style=" Margin:0;position:ab Solute;opacity:1;display:table;left: "+_left + ' px ' + '; color: ' + $scope. Getrandomcolor () +" ' > "+ $scope. danmus[i]+ "</p>"); $ (". Mask P"). each (function () {///detects whether the area is drawn with a bullet if ($scope. CHECKDANMU (This)) {$ ( This). append (_lable); $scope. Movearray (i); I--;return false;});} $scope. Init_barrage ();};/ /Put the first bit of the array to the last one, (because there is too little content in the pop-up pool, the displayed barrage has not been removed) $scope. Movearray = function (i) {var temp = $scope. danmus[i]; $scope. Danmus.splice (i,1); $scope. Danmus.push (temp);} Determine if the content area has a barrage $scope.checkdanmu = function (EL) {return el.find (' P '). length = = 0? true:false;};/ /get random color $scope.getrandomcolor = function () {return ' # ' + (function (h) {return new Array (7-h.length). Join ("0") + H}) ((Math . Random () * 0x1000000 << 0). toString (16))};//Initialize the barrage parameter $scope.init_barrage = function () {$ (". Mask P P"). Show (). each ( function () {var _moveleft = window.screen.width+$ (this). Width (), var time = 100000/$ (this). Width () + 5000;//bounce-off times $scope . Addcssanimate ($ (this), _moveleft,time);});};/ /Add bullet screen Animation $scope.addcssanimate = function (el,_moveleft,time) {el.css ({' Transform ': ' TranslateX (' +-_moveleft+ ' px) ', ' Transition ': ' All ' +time+ 'Ms ' + ' linear ', '-webkit-transform ': ' TranslateX (' +-_moveleft+ ' px) ', '-webkit-transition ': ' All ' +time+ ' ms ' + ' linear ', '-moz-transform ': ' TranslateX (' +-_moveleft+ ' px) ', '-moz-transition ': ' All ' +time+ ' ms ' + ' linear ', '-ms-transform ': ' TranslateX (' +-_moveleft+ ' px) ', '-ms-transition ': ' All ' +time+ ' ms ' + ' linear '});//When the animation is finished, move the pop-up to the same place, replace the bullet-screen text, and start the animation again. Equivalent to the original barrage $timeout (function () {//Judging whether the barrage is still content, if not, remove the bounce 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);};/ /Replace the bullet screen content, restart the bounce animation $scope.resetanimate = function (EL) {el.html ($scope. danmus[0]), $scope. Movearray (0); var _moveleft = El.width () + Screen.width;var time = 100000/el.width () + $scope. Addcssanimate (el,_moveleft,time);};/ /comments, add bullet screen $sCope.adddanmu = function () {var text = $scope. data.comment;if (Text = = "") {return;} $scope. Danmus.unshift (text);}; $scope. Createdanmucontent ();

At this point, the function is basically realized. To close the barrage, simply remove the area of the barrage and the text will not be written.

Logic: First create the number of rows of the barrage based on the $scope.danmucount, then add the barrage in each row and add the corresponding animations. When an animation is finished, the pop-up will be moved back to its original place, the contents of the barrage and the animation re-executed, thus avoiding the overlap of the barrage. The animation execution time of each projectile is determined by the length of the projectile screen.

Personal experience, I hope you will point out the shortcomings. The above code uses the ANGULARJS, but the logic is the same

Related recommendations:

HTML5 Text Bullet Screen effect

Code implementation of the projectile screen of small program

HTML5 game Development-bullet screen + imitation Lightning games Demo