Question

只是想知道你们是否都可以帮助我。

我正在创建一个使用动画效果（slideInLeft）的网页，但我希望只有在通过视口可以检测到div时才激活它。

我尝试过插件，但没有成功，但我觉得应该有比多个插件更简单的解决方案。

我在下面创建了一个codepen：

https://codepen.io/jmac1988/pen/aWPRxo

＆＃13;

$(window).scroll(function() {
  $('#topsub').each(function() {
    var imagePos = $(this).offset().top;
    var imageHeight = $(this).height();
    var topOfWindow = $(window).scrollTop();

    if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight >
      topOfWindow) {
      $(this).addClass(".slideRight");
    } else {
      $(this).removeClass(".slideRight");
    }
  });
});

＆＃13;

.top {
  width: 100%;
  display: block;
  float: left;
  height: 900px;
  background-color: rgb(211, 243, 243);
  padding-top: 40px;
  padding-bottom: 20px;
  padding-left: 10%;
  padding-right: 150px;
}

#topsub {
  position: absolute;
  color: black;
  background-color: rgb(255, 243, 182);
  font-family: 'Sofia Pro';
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}

#toptitle {
  position: absolute;
  color: black;
  background-color: rgb(255, 243, 182);
  font-family: 'Sofia Pro Semi';
  font-weight: 600;
  font-style: normal;
  font-size: 4em;
}

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  animation-name: slideInLeft;
  animation-duration: 3s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pt-page pt-page-1">
  <div class="top">
    <p id="top1"><span id="topsub" class="animated slideInLeft">THE 
    PRACTICE OF EVERYDAY LIFE</span><br>
      <span id="toptitle" class="animated slideInLeft">Michel de Certeau</span>
    </p>
  </div>

＆＃13;

Answer 1

尝试使用＆＃34; detect.js＆＃34; javascript库。这可以通过视口检测设备类型。通过使用它，您可以处理动画。从以下链接获取库 https://github.com/darcyclarke/Detect.js/tree/master

通过视口检测div时的动画效果

1 个答案: