Jquery разное позиционирование элементов с одинаковым классом
Не могу понять, почему у меня элементы собираются в одну точку, а точнее как вычитать от стартовой позиции элемента, чтобы они в конце не собирались в кучу. Делаю простенькую анимацию падающих листьев под ветром.
$(document).ready(function() {
let leaf_mon = document.createElement("div");
leaf_mon.className = "ex_mon";
//create base anim flat x:y
$(".parallax_background_image_1").after(leaf_mon);
spawnParticle();
let interval = setInterval(function() {
updateFrame();
}, 25);
function updateFrame() {
$(".leaf").each(function() {
var posX = -10;
var posY = +10;
let local = $(this);
local.css({
transform: 'translate(' + posX + 'px,' + posY + 'px)',
});
});
}
function spawnParticle() {
//count particles
for (var int = 0; int < 4; int++) {
let leaf = document.createElement("div");
leaf.className = "leaf";
$(".ex_mon").append(leaf);
}
$(".leaf").each(function() {
var yRandomPos = Math.random() * (window.innerWidth / 3);
var randImage = Math.random() * 4;
let local = $(this);
local.css({
transform: 'translateY(' + yRandomPos + 'px)',
backgroundImage: 'url(/test_particle/particle_' + Math.round(randImage) + '.png)'
});
});
};
});