I am trying to randomize the position of diagonal falling lines using padding. Whenever I try to use the below code the lines do not change. However, if I add style:padding-left:300px to the style of the rain and remove my JavaScript I can move the element to the right by 300px. I can theoretically do this and map out each line however I would like to know how to randomize the padding, preferably dynamically and not just onpageload
<script>
function randomnumber(min, max) {
var rn = Math.random() * (max - min) + min;
document.querySelector('#rain .line').style.padding = rn+'px';
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
background:#000000;
margin: 100px;
}
.line {
height: 1px;
width: 40px;
background: white;
transform: rotate(45deg);
}
.rainsize{
height:100%;
width:100%;
opacity:0%;
z-index:1000;
position:fixed;
width:100%;
top:0px;
left:0px;
}
.move{
position:relative;
animation-name: moverain;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes moverain {
0%{top:0px;left:0px;}
100%{top:1000px;left:1000px;}
}
</style>
<div onpageload="randomnumber('10','1000')"class="rainsize"></div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
<div id=rain class="move">
<div class="line""></div>
</div>
You could do something like:
function randomnumber(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.line').forEach(value => value.style.padding = randomnumber(1, 10) + 'px');
}, false);