Home » Jquery » javascript – How can improve many draggable images over the screen in Jquery?

javascript – How can improve many draggable images over the screen in Jquery?

Posted by: admin February 22, 2020 Leave a comment

Questions:

CASE STUDY:

The user is supposed to drag images anywhere within a full-length page.

IMPROVEMENT I WOULD NEED:

1.
Everythings work fine, but I want the initial placement of the images NOT ONLY for the viewport Units of 100vh of the screen but spread for THE ENTIRE PAGE LENGTH so until the user reaches the bottom of the page.

2.
I would need to displace the elements rotation randomly during the on-load page in Jquery.
I have tried with:

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)");

but is not working properly

A clear example to see how the images display should look can be found on this link:

https://olssonbarbieri.com/tutto

Precious help to improve my code?

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/

How to&Answer: