Наклона при наведении изображения


Я прошу пересмотреть этот код, чтобы увидеть, если я следую общей передовой практикой, или если есть лучший способ для достижения цели, поставленной на этот код.

Моей целью было создать образ, который бы с помощью CSS3 rotateY() чтобы мыши позицию над ним, так, чтобы семантический подход, как я мог бы сделать и масштабируемый до любого размера.

Мой подход был простой Див->тега img структуру блочной верстки размер косвенно размер изображения благодаря конструкции ограничение слушателей в JS привязываясь к div (это вращение влияет на размер не дрожание изображения вокруг).

В любом случае, если я мог бы получить некоторую критику, я буду очень признательна. Спасибо за чтение!

Живая Версия

HTML-код index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hover Card</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="container">
      <div class="hover-card">
        <img src="images/me.jpg" alt="A picture of Torben Leif.">
      </div>
    </div>

    <script src="scripts/main.js"></script>
  </body>
</html>

в CSS/стилей.УСБ

.container {
  margin: calc(50vh - 125px) auto;
  width: 250px;
  height: 250px;
}

.hover-card {
  width: 230px;
  height: 230px;
}

.hover-card img {
  width: 100%;
  height: 100%;

  border-radius: 20px;
  overflow: hidden;
  object-fit: cover;
  object-position: center 20%; /* Specific To Avatar Image */

  transition: .2s linear;
  transform-style: preserve-3d;
  transform: perspective(600px) rotateY(var(--js-hover-rotate-val));
}

scripts/main.js

var card = document.querySelector('.hover-card');
var img = document.querySelector('.hover-card img');
var hoverComplete = true; // Used For Smooth Transitions While Rotating.
var degrees = 0; // External For Freeze Fix.

img.addEventListener('transitionend', (e) => {
  if(e.propertyName == 'transform')
    hoverComplete = true;
});

card.addEventListener('mousemove', (e) => {
  if(hoverComplete) {
    let newDegrees = Math.floor((1 - (e.pageX - card.getBoundingClientRect().left) / card.offsetWidth) * 90 - 45) * -1;
    if(newDegrees !== degrees) { // Freeze Fix
      degrees = newDegrees;
      img.style.setProperty('--js-hover-rotate-val', degrees + 'deg');
      hoverComplete = false;
    }
  }
});

card.addEventListener('mouseleave', (e) => {
  img.style.setProperty('--js-hover-rotate-val', '0deg')
  hoverComplete = false;
});


233
3
задан 6 февраля 2018 в 06:02 Источник Поделиться
Комментарии
1 ответ

Я нахожу расчета наклона немного сложнее. Если вы знаете максимальный наклон в градусах, что должно произойти на левый и правый края, вы могли бы объявить об этом и функция расчета

const MAX_INCLINE = 28; // <- just a guess

const shift = (w, x, limit = MAX_INCLINE) => (x / w * 2 - 1) * limit;

Далее Element#getBoundingClientRectна мой взгляд, это лишнее, потому что вы получаете всю необходимую информацию в экземпляре Event передаваемое событие слушателя функции:


  • event.target.width ширина целевой элемент, который слушает событие мыши, то изображение в вашем случае, и

  • event.offsetX положение мыши по оси X относительно элемента, то есть он ближе к 0, когда курсор находится ближе к левому краю, а ближе к X, когда курсор находится ближе к правому краю, где X-ширина элемента (изображения).

Учитывая это, функция прослушивателя событий выглядел бы как простой, как

(event) => {
const { width } = event.target;
const { offsetX } = event;

image.style.setProperty('--js-hover-rotate-val', `${shift(width, offsetX)}deg`);
};


А сайт CodePen с окончательный код может быть также полезен.

2
ответ дан 6 февраля 2018 в 03:02 Источник Поделиться