Всем привет, делаю сейчас проект с Кубом. Вообщем ты нажимаешь на куб, в разные стороны водишь и в зависимости от этого там меняется фон. Но есть одна ПРОБЛЕМА, которую не могу решить, так как очень мало опыта. При отпускании мыши куб привязывается к мыши и ты ее водишь без нажатия, а куб за ней.
Вот код js:
(function () {
//mousedown
var rotateY = 0,
rotateX = 0;
var body = document.querySelector('body');
var pageY = 0;
var pageX = 0;
body.onmousedown =function(){
body.onmousemove = function(event){
if (pageY) {
if (event.pageY > pageY) {
rotateY -= 0.7;
}
else if (event.pageY < pageY) {
rotateY += 0.7;
}
}
if(pageX){
if(event.pageX >pageX){
rotateX += 0.7;
}
else if(event.pageX <pageX){
rotateX -= 0.7;
}
}
pageY = event.pageY;
pageX = event.pageX;
document.querySelector('.cube').style.transform =
'rotateY(' + rotateX + 'deg)'+
'rotateX(' + rotateY + 'deg)';
if(rotateY>37){
document.body.style. backgroundImage = "url('https://img5.goodfon.ru/wallpaper/nbig/5/18/chiornyi-fon-tiom..')";
}
if(rotateY<-37){
document.body.style. backgroundImage = "url('https://data2.1freewallpapers.com/download/sparks-optical-ill..')";
}
if(rotateX>37){
document.body.style. backgroundImage = "url('https://i.ytimg.com/vi/M-gs-5_irOs/hqdefault.jpg')";
}
if(rotateX<-37){
document.body.style. backgroundImage = "url('https://zastavok.net/main/raznoe/158348868486.jpg')";
}
}
}
body.onmouseup =function(){
body.onmousemove = function(event){
pageY = event.pageY;
pageX = event.pageX;
}
}
})();
Помогите Плиз)
