Как сделать так, чтобы дети из абсолютно позиционированного div с высотой 100% находились в визуальном окне просмотра браузера только тогда, когда они видимы - PullRequest
Новая
       28

Как сделать так, чтобы дети из абсолютно позиционированного div с высотой 100% находились в визуальном окне просмотра браузера только тогда, когда они видимы

0 голосов
/ 04 июня 2019

У меня есть несколько элементов ul li элементов внутри absolutely positioned div with height 100%, и я использую плагин под названием

https://github.com/customd/jquery-visible, который на основе некоторых математических проверяет, является ли элемент видимым для пользователя (в визуальном окне просмотра) для анимации видимых элементов. Но когда элементы находятся внутри абсолютно расположенного элемента div с высотой 100%, кажется, что они действуют так, как они видны, даже если они не находятся внутри визуального видового экрана. Я не уверен, что я могу сделать, чтобы элементы ul li были видны только тогда, когда пользователь действительно может их видеть, но также чтобы сохранить макет, который у меня есть.

HTML: 

<div class="w-full bg-white view-container">
 <div class="inner">
  <ul class="w-full flex flex-wrap justify-center p-0">
    <li class="hover:cursor-none" v-for="teammember in projectTeamData || projectTeamDataClientView" :key="teammember.id" >
      <div class="w-full px-10 md:px-2 py-10 relative teammember_big text-left">
        <div class="img-wrapper relative hover:cursor-pointer">
          <img class="w-full block" :src="teammember.picture">
          <div class="img-overlay"></div>
          <div class="work-overlay"><div class="work-description"><div class="work-title" v-text="teammember.title"></div><div class="work-phone"><span>M:</span> <a :href="'tel:' + teammember.phone_number"><span v-text="teammember.phone_number"></span></a></div><div class="work-email"><span>E:</span> <a :href="'mailto:' + teammember.email"><span v-text="teammember.email"></span></a></div></div></div>
          <div class="button-holder"><a class="button">BIO & DETAILS</a>
          </div>
          </div>
          <div class="ratioSave"></div>
        <p class="name text-center" v-text="teammember.name"></p>
      </div>
    </li>
  </ul>
</div>

Анимация с помощью jquery-плагина и CSS: 

zoomEffect: function() {
  var win = $(window);
  var allImages = $("li");
  // Already visible modules in the viewport
  allImages.each(function(i, el) {
    //console.log("visible here");
    var el = $(el);
    if (el.visible(true)) {
      el.addClass("zoom-in");
    }
  });
  // Not visible modules in the viewport
  win.scroll(function(event) {
    allImages.each(function(i, el) {
      var el = $(el);
      if (el.visible(true)) {
        el.addClass("zoom-in");
      }
    });
  });
}

.zoom-in {
/* start state */
opacity: 0;
transform: scale(0);
animation: zoom-in 0.2s ease-in-out forwards;
}
@keyframes zoom-in {
25% {
opacity: 0.25;
transform: scale(0.25);
}
50% {
opacity: 0.5;
transform: scale(0.5);
}
75% {
opacity: 0.75;
transform: scale(0.75);
}
to {
opacity: 1;
transform: scale(1);
}
} 

.view-container {
 position: absolute;
 top: 140px;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;
 transition: top 0.5s;
.inner {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 overflow-x: hidden;
 overflow-y: scroll;
 }
}
@media (min-width: 768px) {
.view-container {
top: 70px;
}
}
...