WordPress
- 101 ответ
- 0 вопросов
44
Вклад в тег
// Глаза
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 + ")";
}
@media screen and (max-width:480px){
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 42.5%;
}
}