当内容在视口中时应用css动画(以及页面堆积.js）

Apply css animation when content is in viewport(along with pagepiling.js)

本文关键字：js 动画 视口 css 应用      更新时间：2023-09-26

我正在尝试在内容进入视口时对其进行动画处理。但问题是，jquery（用于检查内容是否在视口中）不起作用，因为我也在使用页面堆积.js（http://alvarotrigo.com/pagePiling/）。我不知道确切的原因，但我认为这可能是由于使用页面堆积的不同页面的位置.js这造成了问题。有什么解决方案吗？（基本上，我想要这样的东西）

<link rel="stylesheet" type="text/css" href="animate.css" />  <!-- animate.css css3 library   -->
<script src="viewportchecker.js"></script>      <!-- viewportchecker plugin   -->
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>
<style>
.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}
</style>
<script>
var deleteLog = false;
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#bfda00', '#693575', '#2C3E50', '#51bec4'],
easing: 'linear'
});
});
jQuery(document).ready(function() {
jQuery('.post').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeIn',
offset: 100
});
});
</script>
<div id="pagepiling">
    <div class="section" id="section1">
    <div class="intro">
         <div class="post"> <!-- Post content goes here --> </div>
    </div>
    </div>
    <div class="section" id="section2">
    <div class="intro">
        <div class="post"> <!-- Post content goes here --> </div>
    </div>
    </div>
</div>

如果您阅读页面Piling.js文档，您会发现它为您提供了回调，例如afterLoad，onLeave...

只需像文档中详细介绍的那样使用它们：

$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    afterLoad: function(anchorLink, index){
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }
        //using anchorLink
        if(anchorLink == 'secondPage'){
            alert("Section 2 ended loading");
        }
    }
});
相关文章：