体にランダムに追加されたdivがたくさんあります:
for(var i = 0; i < 1020; i++) {
var randomleft = Math.floor(Math.random()*Math.floor(Math.random()*1500)),
randomtop = Math.floor(Math.random()*Math.floor(Math.random()*1500));
allCubes += '<div id="cube'+i+'" class="cube" style="position: absolute; left: '+randomleft+'px; top: '+randomtop+'px; width: 7px; height: 7px; z-index: -1;"></div>';
}
$('body').append(allCubes);
for (var i = 0; i < 1020; i++) {
cubes['cube' + i] = $('#cube' + i)
}
それらには、1つのdivに関連するすべてのdivをアニメーション化する機能があります#fixed
。
var row = 9,
t = 0;
$fixed.css({'background-color': '#000', left: '25%', top: '35%'});
var fixedOffs = $fixed.offset();
cubes[0].transition({ top: fixedOffs.top+row, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
cubes[1].transition({ top: fixedOffs.top+row*2, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
cubes[2].transition({ top: fixedOffs.top+row*3, left: fixedOffs.left, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
cubes[3].transition({ top: fixedOffs.top+row*4, left: fixedOffs.left+row, 'background-color': '#000',delay: Math.floor(Math.random()*1000)}, Math.floor(Math.random()*1000));
// until cubes[1019]...
ええ、各divのすべての数字と座標を書き留めています。私はcss3トランジション(のような構文を持つtransit.js .animate()
)を使用して、可能な限りパフォーマンスを高めています。しかし残念なことに、それは本当に遅いです。私が望むように、この大量のdivを処理する方法を誰かが考えていますか?
注: すべての単一の div には独自の位置があり、システムはありますが、毎回異なります。