画面いっぱいに要素を増やす

画面いっぱいにタイルのように<div class="item"></div>を並べて
アニメーションを作りたいのですが、画面いっぱいに増やす？繰り返す？のが分かりません
色々検索してやってるのですがヒントが得られず、、
何のメソッドを使ったらいいですか？
jqueryでやりたいです、、

<div id="loader" class="loader">
	<div class="layer"></div>
	<div class="grid"></div>
</div>

<script>
	$('.grid').append('<div class="item"></div>');
</script>


.loader {
  overflow: hidden;
  will-change: opacity;
}
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:#ffaa00;
  will-change: background;
}
.grid {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.grid .item {
	width: 100px;
	height: 100px;
  background: #FFFD00;
  background: #FFFD00;
  background: #FFFD00;
  will-change: opacity, background;
  transition: background 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
8    <title>Document</title>
9</head>
10<body>
11    <div id="tiletest" style="position:absolute;top:0px;left:0px;"></div>
12    <script>
13        function tiletest()
14        {
15            var w = document.documentElement.clientWidth;
16            var h = document.documentElement.clientHeight;
17            var tile_w = 100;
18            var tile_h = 100;
19            var tile_x = (w / tile_w);
20            var tile_y = (h / tile_h);
21            for(var x = 0; x < tile_x; x++) {
22                for(var y = 0; y < tile_y; y++) {
23                    $('#tiletest').append('<div style="position:absolute;border:solid 1px;" id="tile_' + x + '_' + y + '"></div>')
24                    $('#tile_' + x + '_' + y).offset({top: y * tile_h, left: x * tile_w});
25                    $('#tile_' + x + '_' + y).height(tile_h);
26                    $('#tile_' + x + '_' + y).width(tile_w);
27                }
28            }
29        }
30
31        tiletest();
32    </script>
33</body>
34</html>