Форум

FreeZon · #1 (**permalink**) 20.06.2016, 18:27

$(document).mousemove(function(logo){
	var e = e || window.event;
	n=getComputedStyle(document.documentElement).height.slice(0,-2);
	s=getComputedStyle(document.documentElement).width.slice(0,-2);
	//alert(s + 'z' + n ); // переменные не пустые...
	//document.getElementById('logo_img').style.transform = 'rotateX('+ n/2-e.pageY +' deg)';
	//document.getElementById('logo_img').style.transform = 'rotateY('+ -s/2-e.pageY +' deg)';
	$('#logo_img').css('transform', 'rotateX('+ n/2-e.pageY +' deg)');
	$('#logo_img').css('transform', 'rotateY('+ s/2-e.pageX +' deg)');
});

Я хочу сделать чтобы при движение мышкой блок двигался, и наклонялся в сторону мышки.
Написал код... В итоге, он мне не изменяет свойство цсс, как будто такого элемента #logo_img нет, хотя он есть, но к нему ни чего не применяется... Проверял через алерт переменные и работает вообще mousemove, да все работает. Пробовал изменять css через jq и сам js не там не там не изменяет...

Decode · #2 (**permalink**) 20.06.2016, 18:55

FreeZon,

$(document).mousemove(function(e){
  var n = getComputedStyle(document.documentElement).height.slice(0,-2);
  var s = getComputedStyle(document.documentElement).width.slice(0,-2);
  $('#logo_img').css('transform', 'rotateX('+ (n/2-e.pageY) +'deg)');
  $('#logo_img').css('transform', 'rotateY('+ (s/2-e.pageX) +'deg)');
});

aklis · #3 (**permalink**) 20.06.2016, 18:56

Пробел перед deg лишний. Это как минимум.

aklis · #4 (**permalink**) 20.06.2016, 18:56

Пардон, пока отвечал, уже ответили

ruslan_mart · #5 (**permalink**) 20.06.2016, 19:43

var logoImg = document.getElementById('logo_img');

window.onmousemove = function(e) {
    var values = [
         'rotateX('+ (this.innerHeight / 2 - e.pageY) + 'deg)',
         'rotateY('+ (this.innerWidth / 2 - e.pageX) + 'deg)'
    ];
    logoImg.style.transform = values.join(' ');
};

FreeZon · #6 (**permalink**) 20.06.2016, 19:45

Я хотел как у него сделать: https://daneden.me/
Только с одним лого, но у меня не получается ни чего. Чет я не то считаю.... Поможет кто ? Объясните что и как нужно считать.
p.s я не хочу брать уже готовый его код я хочу понять как и что работает как вычитать по х и у объяснит кто ?...

FreeZon · #7 (**permalink**) 20.06.2016, 21:24

Видимо ни кто не знает..

Dilettante_Pro · #8 (**permalink**) 21.06.2016, 12:46

FreeZon,
В первом приближении... как черновик для дальнейшего развития

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    <title>Untitled Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {
               var n = getComputedStyle(document.documentElement).height.slice(0, -2);
               var s = getComputedStyle(document.documentElement).width.slice(0, -2);
                $('#logo_img').css('transform', 'rotateY(' + ((s / 2 - e.pageX) / 10) + 'deg) rotateX(' + (( e.pageY) / 10) + 'deg)');
              });
        });
    </script>
  </head>
  <body>
  <div id = 'logo_img' style="position:absolute;width:200px;height:200px;left:40%;">
   <img src="http://javascript.ru/forum/image.php?u=36419&dateline=1406918590" style="position:relative;width:100%;height:100%" >
  </div>
  </body>
</html>

FreeZon · #9 (**permalink**) 21.06.2016, 15:12

Сообщение от Dilettante_Pro

FreeZon,
В первом приближении... как черновик для дальнейшего развития

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" >
    <title>Untitled Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {
               var n = getComputedStyle(document.documentElement).height.slice(0, -2);
               var s = getComputedStyle(document.documentElement).width.slice(0, -2);
                $('#logo_img').css('transform', 'rotateY(' + ((s / 2 - e.pageX) / 10) + 'deg) rotateX(' + (( e.pageY) / 10) + 'deg)');
              });
        });
    </script>
  </head>
  <body>
  <div id = 'logo_img' style="position:absolute;width:200px;height:200px;left:40%;">
   <img src="http://javascript.ru/forum/image.php?u=36419&dateline=1406918590" style="position:relative;width:100%;height:100%" >
  </div>
  </body>
</html>

Вот объясни теперь почему по Y в градусах мы должны из половины высоты вычесть координаты мыши по Х.
А в ротате Х ни чего вычитать не надо просто дели координаты мыши по У на чувствительность ?
Объясни как все это считается формула может

Dilettante_Pro · #10 (**permalink**) 21.06.2016, 15:39

Сообщение от FreeZon

Вот объясни теперь почему по Y в градусах мы должны из половины высоты вычесть координаты мыши по Х.

Не из половины высоты, а из половины ширины. Чтобы вращение по оси Y шло вокруг середины картинки по горизонтали.

Сообщение от FreeZon

А в ротате Х ни чего вычитать не надо просто дели координаты мыши по У на чувствительность

Здесь вращение получилось вокруг верхнего края картинки.
Можно сделать и вокруг середины картинки по высоте:
rotateX(' + (( e.pageY - 100) / 10) + 'deg)'
где -100 - половина высоты картинки.
Если бы картинка была размещена в центре экрана, то можно было бы взять половину высоты экрана.
Почему в одном случае (e.pageY - 100), а в другом (s / 2 - e.pageX)?
Для достижения нужного визуального эффекта.
Поменяйте, посмотрите, сделайте как больше нравится

Форум

Справочник

Discord чат

Курсы javascript