Use JS to achieve the effect of text aggregation animation and js text aggregation Animation
Preface
The principle of text aggregation is to divide the container into several small pieces and then set each small part.background-poisition
Finally, add the css3 animation. Remove the comments and only 20 lines of code.
Let's take a look:
The js Code is as follows:
// C is the number of columns, r is the number of rows, and the number of small pieces of box is divided into var box = document. querySelector ('. boxwrap1'), c = 4, r = 8; // var w = box for each small block. offsetWidth/c, h = box. offsetHeight/r; // Add small blocks for loop (var I = 0; I <r; I ++) {for (var j = 0; j <c; j ++) {var _ div = document. createElement ('div '); var _ left = j * w, _ top = I * h; // Add the css style and set the background of each small block. _div.style.css Text = 'width: '+ w + 'px; height:' + h + 'px; left: '+ _ left + 'px; top:' + _ top + 'px; opacity: 0; background-position: '+ (-_ left) + 'px' + (-_ top) + 'px '; // Add the css animation time _ div. style. transition = 'all' + Random (1, 1.8) +'s Trans'; // Add the css transform animation _ div. style. transform = 'spective (800px) translate3d ('+ Random (-200,200) + 'px,' + Random (-200,200) + 'px, 300px) rotate ('+ Random (-90,90) + 'deg) scale (' + Random () + ')' // Add box. appendChild (_ div) ;};}; // Add the animation setTimeout (function () {box. classList. add ('set') ;}, 100); // Random number function Random (start, end) {return Math. random () * (end-start) + start ;};
The complete example is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Summary
The above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.