Как можно улучшить многие перетаскиваемые изображения на экране в Jquery?

Question

ОБУЧЕНИЕ В СЛУЧАЕ:

Предполагается, что пользователь должен перетаскивать изображения в любое место на полноразмерной странице.

УЛУЧШЕНИЕ, КОТОРОЕ Я НУЖЕН:

1. Все работает нормально, но я хочу, чтобы начальное размещение изображений НЕ ТОЛЬКО для области просмотра 100Вч экрана, но распространяется на ДЛИНА СТРАНИЦЫ , пока пользователь не достигнет внизу страницы.

2. Мне нужно было бы смещать вращение элементов случайным образом во время страницы загрузки в Jquery. Я пробовал с:

var number = Math.floor((Math.random() *15) + 2); var number2 = Math.floor((Math.random() * 0) + -15); $("shape--square").css("transform", "rotate(" + number + "deg)"); $(".shape--circle").css("transform", "rotate(" + number2 + "deg)");

, но не работает должным образом

Наглядный пример того, как должны выглядеть изображения на экране, можно найти по этой ссылке:

https://olssonbarbieri.com/tutto

Драгоценная помощь для улучшения моего кода?

var winWidth = window.innerWidth,
    winHeight = window.innerHeight,
    threeWinHeight = winHeight*3;

$(window).on('resize', function(){
  winHeight = window.innerHeight,
  twiceWinHeight = winHeight*2;
});

$('.shape').each(function(){
  var topPos = Math.floor(Math.random() * winHeight),
      leftPos = Math.floor(Math.random() * winWidth);
  $(this).css('top', topPos + 'px');
  $(this).css('left', leftPos + 'px');
});

Draggable.create('.shape', {
  //type:"rotation",
  bounds: '.title',
  edgeResistance:0.65,
  throwProps:true,
});





var number = Math.floor((Math.random() *15) + 2);
var number2 = Math.floor((Math.random() * 0) + -15);
$("shape--square").css("transform", "rotate(" + number + "deg)");
$(".shape--circle").css("transform", "rotate(" + number2 + "deg)");

body {
 margin:0;
 background: red;
  text-align:center;
  color:#ddd;
  font-family: sans-serif;
  min-height: 100vh;
}
.block {
  //transform: translateX(50vw);
}
h1 {
  color: black;
  font-size: 50px;
  font-weight: normal;
  text-align: left;

}




.title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500vh;
}

.shape {
  display: inline-block;
  position: absolute;
  font-size: 7.5vw;
  background-color: #00FF26;
  color: black;
  line-height: 1;
  padding: 2.25vw;
}
#shape-one{background-color:purple!important;}
#shape-two{background-color:purple!important;}
#shape-three{background-color:purple!important;}
#shape-four{background-color:purple!important;}
#shape-five{background-color:purple!important;}
#shape-six{background-color:purple!important;}
#shape-seven{background-color:purple!important;}
#shape-eight{background-color:purple!important;}

.shape--circle {
  border-radius: 50%;
  width: 8vw;
  height: 8vw;
}

 <main>
<div class="title">

  <span class="shape shape--square" id="shape-one"><span class="word"  >Index</span></span>
  <span class="shape shape--square"><span class="word">Art</span></span>
  <span class="shape shape--square"><span class="word">Book Fair</span></span>

  <span class="shape shape--circle">
    <img src="https://i3.cdn.hhv.de/catalog/shop_detail_zoom/00126/126428.jpg" height="242" width="242">
    <span class="word"></span></span>

  <span class="shape shape--square"><span class="word">kurimanzutto</span></span>
  <span class="shape shape--square"><span class="word">Mexico</span></span>
  <span class="shape shape--square"><span class="word">City</span></span>
  <span class="shape shape--square"><span class="word">january</span></span>
  <span class="shape shape--square"><span class="word">2020</span></span>
  <span class="shape shape--circle"><span class="word">23</span></span>
  <span class="shape shape--circle"><span class="word">24</span></span>
  <span class="shape shape--circle"><span class="word">25</span></span>
  <span class="shape shape--circle"><span class="word">26</span></span>  
</div>
 </main>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/utils/Draggable.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ThrowPropsPlugin.min.js"></script>

JS FIDDLE: https://jsfiddle.net/CAT999/40bsxaye/9/