ОБУЧЕНИЕ В СЛУЧАЕ:
Предполагается, что пользователь должен перетаскивать изображения в любое место на полноразмерной странице.
УЛУЧШЕНИЕ, КОТОРОЕ Я НУЖЕН:
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/