Question

我试图在视口中添加动画内容。但问题是，jquery（用于检查内容是否在视口中）不起作用，因为我也在使用pagepiling.js（http://alvarotrigo.com/pagePiling/）。我不知道确切的原因，但我认为这可能是由于使用pagepiling.js创建问题的不同页面的位置。有没有解决方案？（基本上，我想要像this）

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

Answer 1

如果您阅读了pagePiling.js documentation，就会发现它会为您提供回调，例如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");
        }
    }
});

当内容在视口中时应用css动画（以及pagepiling.js）

1 个答案: