Эффект наведения не работает с Transform: rotateY - PullRequest
Новая
       37

Эффект наведения не работает с Transform: rotateY

1 голос
/ 16 марта 2020

Здравствуйте. Я изменил элемент флип-карты с w3schools и добавил javascript, что они будут вращаться на 60 пикселей, если они находятся в области просмотра, и пользователь может понять, что за картой есть текст. Это хорошо работает на прокрутке, но теперь я отпускаю, что эффект зависания не работает. Можете ли вы помочь мне?

https://www.w3schools.com/howto/howto_css_flip_card.asp

https://jsfiddle.net/mqbkzLy2/

var x = 0;
$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

$(window).scroll(function() {

  if ($(".flip-card-inner").isInViewport() && x == 0) {
    setTimeout(function() {
      $(".flip-card-inner").css('transform', 'rotateY(80deg)');
    }, 400);
    setTimeout(function() {
      $(".flip-card-inner").css('transform', 'rotateY(0)');
    }, 800);
    x++;
    console.log(x);
    console.log("in");
  }
  if (!$(".flip-card-inner").isInViewport() && x != 0) {
    x = 0;
    console.log('No success.');
    console.log(x);
    console.log("out");

  }
});
body {
  font-family: Arial, Helvetica, sans-serif;
}

.flip-card {
  background-color: transparent;
  width: 300px;
  height: 300px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #2980b9;
  color: white;
  transform: rotateY(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="height:120vh;background-color:yellow;"></div>
<h1>Card Flip with Text</h1>
<h3>Hover over the image below:</h3>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/d/de/Windows_live_square.JPG" alt="Avatar" style="width:300px;height:300px;">
    </div>
    <div class="flip-card-back">
      <h1>John Doe</h1>
      <p>Architect & Engineer</p>
      <p>We love that guy</p>
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 16 марта 2020

что они будут вращаться на 60px, если они находятся в области просмотра, и пользователь может понять, что за карточкой есть текст.

Не используйте для этого прослушиватель события прокрутки, используйте Наблюдатель пересечения (IO) для этого.

IO был разработан для таких задач. С помощью ввода-вывода вы можете реагировать всякий раз, когда элемент HTML пересекается с другим (или с областью просмотра)

Проверьте эту страницу , она показывает, как анимировать элемент, когда он попадает в область просмотра (прокрутите весь путь вниз). Конечно, вы можете использовать любую анимацию, какую захотите, тогда она обрабатывается CSS. Это просто очень наглядный пример.

Краткий обзор того, что вы должны сделать, чтобы заставить IO работать:

Сначала вам нужно создать нового наблюдателя: 

var options = {
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);

Здесь мы определяем, что, как только ваш целевой элемент становится видимым на 100% в области просмотра (порог 1), ваша функция обратного вызова выполняется. Здесь вы можете определить другой процент, 0,5 будет означать, что функция будет выполнена, когда ваш элемент станет видимым на 50%.

Затем вы должны определить, какие элементы следует просматривать 

var target = document.querySelector('.flip-card');
observer.observe(target);

Наконец, вам нужно указать, что должно произойти, когда элемент будет виден в вашем окне просмотра, определив функцию обратного вызова: 

var callback = function(entries, observer) { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // here you animate another element and do whatever you like
  });
};

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

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

...