質問編集履歴
1
javascript 追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -81,4 +81,41 @@
|
|
|
81
81
|
transform: translateX(-100%);
|
|
82
82
|
}
|
|
83
83
|
}
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
```ここに言語を入力
|
|
87
|
+
// 素材のランダム配置
|
|
88
|
+
function randomImages(id) {
|
|
89
|
+
|
|
90
|
+
// 関数の引数に設定したid要素を変数に代入
|
|
91
|
+
var box = $(id);
|
|
92
|
+
|
|
93
|
+
// 画像配列
|
|
94
|
+
var imageList = [
|
|
95
|
+
's01',
|
|
96
|
+
's02',
|
|
97
|
+
's03',
|
|
98
|
+
];
|
|
99
|
+
|
|
100
|
+
var width = window.innerWidth;
|
|
101
|
+
var height = window.innerHeight;
|
|
102
|
+
// 配列の数だけ繰り返し処理
|
|
103
|
+
for ( var i=0; i<imageList.length; i++) {
|
|
104
|
+
|
|
105
|
+
// 縦横軸用の乱数生成
|
|
106
|
+
var x = width * (Math.floor(Math.random() * 100) / 100); // 画像位置 top:x
|
|
107
|
+
var y = height * (Math.floor(Math.random() * 100) / 100); // 画像位置 left:y
|
|
108
|
+
var w = Math.floor(Math.random() * 100) + 90; // 画像サイズwidth ランダム値に100px加算
|
|
109
|
+
var f = Math.floor(Math.random() * 3) + 1; // fuwafuwa randomu
|
|
110
|
+
|
|
111
|
+
// sp
|
|
112
|
+
if (matchMedia('(max-width: 960px) and (orientation: portrait)').matches) {
|
|
113
|
+
// ウィンドウサイズが960px以下かつ縦向きのとき
|
|
114
|
+
w = w * 0.7;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
// box要素にimgタグを追加（乱数を代入した変数をポジションに設定）
|
|
118
|
+
box.append('<div class="logo" style="top:'+y+'px; left:'+x+'px;"><img src="/img/sdgs/'+imageList[i]+'.svg" class="pc-home-img fuwafuwa'+f+'" alt="" style="width:'+w+'px;"></div>');
|
|
119
|
+
}
|
|
120
|
+
}
|
|
84
121
|
```
|