おしえて

ソースコードのいじる場所が分かりません。

解決済

質問者：2021五郎蔵
質問日時：2022/12/23 02:06
回答数：1件

ネットで雪を降らすソースコードがありました。
試しにホームページビルダーを使って
コピーして見たら縦横の寸法が凄く小さい。
横は引っ張ったら伸ばせましたが、縦幅が大きくなりません。
下記のソースコードで何処を操作したら、大きくなるのでしょうか？
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>snowPowder</title>
<style>
* {
margin: 0;
padding: 0;
}

#main__container {
width: 100%;
height: 300px;
background-color: #000;
overflow: hidden;
display: flex;
justify-content: space-around;
transition-duration: 0.1s;
transition-timing-function: ease;
}
</style>
</head>

<body>
<div id="main__container"></div>
<script>
var winWidth = document.documentElement.clientWidth, //ウィンドウの横幅
winHeight = document.documentElement.clientHeight; //ウィンドウの高さ

var main = document.getElementById('main__container');

for (var i = 1; i <= 40; i++) {
var div = document.createElement('div'); //divを作成
main.appendChild(div); //divを追加
div.setAttribute('id', 'contents' + zeroPad(i));
div.setAttribute('style', 'position:relative; background-color:#fff; border-radius:50%; top:-30px;');
randomValue(div);
}

function randomValue(ele) {
var multiArray = [1, -1]; //1か-1の配列
var randomMulti = multiArray[Math.floor(Math.random() * multiArray.length)]; //1か-1をランダムに取得
var maxSize = 9, //最大サイズ
minSize = 3, //最小サイズ
objSize = getRandomNum(maxSize, minSize), //サイズ最大〜最小までのランダム値
blurValue = getRandomNum(3, 0), //ボカシ量
opacityValue = getRandomFloot(0.8, 0.5).toFixed(1), //透明度　※小数点第1位まで取得
XSpeedNum = getRandomFloot(2, 0), //Xの移動量
YSpeedNum = getRandomFloot(4, 2), //Y座標の移動量
ZSpeedNum = getRandomFloot(0.025, 0); //Z座標の移動量

ele.style.width = objSize + 'px';
ele.style.height = objSize + 'px';
ele.style.margin = (maxSize - objSize) / 2 + 'px';
ele.style.filter = 'blur(' + blurValue + 'px)';
ele.style.opacity = opacityValue;

var YNum = -40;
var XNum = 0;
var ZNum = 0;

(function animeLoop() {
var requestAnime = window.requestAnimationFrame(animeLoop);
XNum += XSpeedNum;
YNum += YSpeedNum;
ZNum += ZSpeedNum;
ele.style.top = YNum + 'px';
ele.style.left = XNum * randomMulti + 'px';
ele.style.transform = 'scale(' + ZNum + ',' + ZNum + ')';

if (YNum >= 300) {
window.cancelAnimationFrame(requestAnime);
return randomValue(ele);
}
})();

return ele;
}

//////////// 関数 ////////////
function zeroPad(zeroNum) { //ゼロパッド取得関数
var zeroNum = ('000' + zeroNum).slice(-3);
return zeroNum;
}

function getRandomNum(max, min) { //ランダム値取得関数
var ranNum = Math.floor(Math.random() * (max + 1 - min) + min);
return ranNum
}

function getRandomFloot(max, min) { //ランダム値取得関数小数点第1位
var ranFlootNum = Math.random() * (max - min) + min;
return ranFlootNum;
}

</script>
</body>

</html>