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

Question

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

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

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

我在下面创建了一个Codepen：

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

 $(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"); } }); }); 

 .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; } 

 <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> 

Answer 1

尝试使用“ detect.js” JavaScript库。 可以通过视口检测设备的类型。 通过使用此功能，您可以处理动画。 从以下链接获取库https://github.com/darcyclarke/Detect.js/tree/master