Как сделать такие глаза?

Question

[doroshenko_magic]

Сайт Навального про Медведева https://dimon.navalny.com

Comments

[Сергей delphinpro]

ну так на сайте и посмотрите. делов-то...

Answer 1

[Mike]

https://dimon.navalny.com/static/js/script.fbb501e...
смотреть с 438-500 строки отвечают за глаза

// Глаза

var head = document.querySelector('.head');
var eyeLeft = document.querySelector('.eye--left');
var eyeRight = document.querySelector('.eye--right');

var x_coef = 5.0;
var y_coef = 3.5;

// для мобильных другие радиусы вращения глаз
if (!window.matchMedia('(min-width: 768px)').matches) {
  x_coef = 3.5;
  y_coef = 3;
}

var doc = document.documentElement;

function onMove(e) {
  var r, dist, y, x1, y1, x2, y2;

  x2 = e.clientX;
  y2 = e.clientY;

  // учет положения скролла
  // var left = (window.pageXOffset || doc.scrollLeft) - (doc.clientLeft || 0);
  var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);

  // левый глаз

  x1 = eyeLeft.offsetLeft + 22;
  y1 = eyeLeft.offsetTop + 80 - top;

  dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
  r = Math.atan(dist/20);

  var x_l = ((r * x_coef * (x2 - x1)) / dist);
  var y_l = ((r * y_coef * (y2 - y1)) / dist);

  // правый глаз

  x1 = eyeRight.offsetLeft + 22;
  y1 = eyeRight.offsetTop + 80 - top;

  dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
  r = Math.atan(dist/20);

  var x_r = ((r * x_coef * (x2 - x1)) / dist);
  var y_r = ((r * y_coef * (y2 - y1)) / dist);

  // по вертикали беру среднее значение
  y = (y_l + y_r) / 2;

  // коэффициет независимости подвески зависит от расстояния
  // var indep_coef = 1.0 - 1 / (dist/10 + 2);
  var indep_coef = 0.8;

  var x_l1 = indep_coef * x_l + (1 - indep_coef) * x_r;
  var x_r1 = indep_coef * x_r + (1 - indep_coef) * x_l;

  eyeLeft.style.transform = "matrix(1, 0, 0, 1," + x_l1 + "," + y + ")";
  eyeRight.style.transform = "matrix(1, 0, 0, 1," + x_r1 + "," + y + ")";

}

Сами глаза:
правый https://dimon.navalny.com/static/img/head/small/ey...
левый https://dimon.navalny.com/static/img/head/small/ey...

P.S. комментарии к коду прекрасны)

Comments

[Mike]

можете отметить решением, если ответ помог)

Answer 2

[rinatoptimus]

Поздновато он сайт опубликовал, я как раз искал такие глаза, измучился, в итоге пришлось сделать так.
Кому интересно, вот еще недавно пример нашел: https://two.js.org/examples/renderers.html

Comments

[rinatoptimus]

Проверил, у него та же проблема, из-за которой я мучился: глаза - каждый сам по себе, если близко подвести мышь слева к левому глазу и продолжить движение вправо, то левый глаз движется, а правый все еще ждет приближения курсора.