HTML5でモバイル端末の弾幕アニメーション効果を実現

1. 個々のコンテンツを編集し、独自の幅を計算し、初期位置を決定します。

2. 移動した距離が画面幅になります

3.jsは高さ、アニメーションの移動時間、アニメーションの遅延時間を乱数で制御するcssアニメーション関数を動的に追加します。

(例として 3 つを取り上げます。インターフェースが長すぎて分かりにくいと思われる場合は、js で動的に生成することもできます)

 <div class=cute-barrage> <div class=barrage-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>Huabei の毎月の返済期間はこちらです<i>ははは</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud。 com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>給料を待っています<i>ふふふ</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>金持ちになろう、金持ちになろう<i>そうそうそう</i></span> </div></div>

.cute-barrageで表示範囲と位置を決め、幅は100%、高さはカスタマイズ、水平方向を超える部分は非表示となります。

.barrage-div コンテンツ部分、長さはコンテンツによって決まり、親に対する相対的な位置が決まります

 html,body{ width: 100%; }.cute-barrage{ width: 100%; height: 4rem; /*弾幕の長さを決定します*/ location:Absolute; /*弾幕の高さを決定しますbarrage*/ left : 0; overflow-x: hidden; /*水平方向の余分な部分を非表示にします*/ .barrage-div{ 位置: 絶対値; 右: -100%; /* 最初はインターフェイスの外側にあることを確認してください。右から左が右、左から右が左です*/ height: 0.6rem: rgba(255, 255, 255, 0.9); radius: 2rem;white-space:nowrap; /*コンテンツが 1 行で表示されていることを確認してください。そうしないと、最後に移動すると折り返されます*/ img{ width: 0.5rem; height: 0.5rem; vertical-align: middle; //インラインブロック要素、中央揃えpadding-left: 0.05rem; border-radius: 50%; } spadding: 0 0.1rem; //インライン ブロック要素、中央揃えの 4 つの要素が必須です。 height: 0.6rem; //インライン ブロック要素、中央揃えの 4 つの要素が必須です。 inline-block; //インライン ブロック要素、4 つのインライン配置が必須ですvertical-align: middle; //インライン ブロック要素、4 つのインライン配置が必須です i{ color: #fe5453; } }}

 //弾幕 var winWidth = $(window).width(); //画面の幅を取得 $(.barrage-div).each(function(index,value){ //各弾幕を走査します var width = $( value) .width(); //現在の弾幕の幅を取得します var topRandom = Math.floor(Math.random() * 3) + 'rem'; //0、1、2の乱数を取得し状況に応じて変更 $(value).css({right:-width,top:topRandom}) //弾幕を画面外に移動、 // アニメーション フレーム関数のスペルの位置を超えて、各アニを区別することを忘れずに、幅をその負の幅から画面全体の距離だけ移動します。 var keyframes = `/ @keyframes ani${index}{ form{ right: ${-width}px } から{ right:${winWidth}px; } }/ @-webkit-keyframes ani${-width}px; から { right:${winWidth} }`;ページの head タグに追加 $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); //アニメーション速度リスト変数を定義します。 aniList = [3,5,7,9,11]; //配列 0,1,2,3,4 から乱数を取得します var aniTime =Math.floor(Math.random() * 5); Give 前線全面弾幕にアニメーション CSS を追加する場合 //遅延時間はそれぞれの *1.5 倍、この変数 $(value).css({animation:`ani${index} ${aniList[aniTime]}s Linear ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s 線形 ${index * 1.5}s`});})

上記は、編集者が紹介したモバイル弾幕アニメーション効果の HTML5 実装です。ご質問があれば、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！

この記事が役立つと思われる場合は、転載していただいてかまいませんので、出典を明示してください。ありがとうございます。