Using CSS3 to realize the effect of projectile screen

This time to bring you to use CSS3 to achieve the effect of the barrage, with the CSS3 to achieve the effect of the attention of the matter, the following is the actual case, together to see.

Recently need to achieve the project needs to implement the barrage, on-line reference to a variety of methods, and finally feel that the transform+transition implementation of the effect on the mobile device performance best, 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.

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.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

You don't know the upset CSS properties

How to omit CSS custom text