Question

我的网站只有一个页面，但使用Fullpage.js有不同的部分。我想知道每次滚动到某个部分（锚点）时是否可以激活velocity.js动画，因为现在，所有内容都会立即加载？

HTML

<div id="fullpage">
    <div class="section" id="section0">
        <img class="mainlogo" src="img/mainlogo.png" />
        <h1 class="mainheading">company title</h1>
        <p class="subheading">subheading</p>  
    </div>
 <!-- second page -->
    <div class="section" id="section1">
        <div class="slide" id="slide1">
            <div class="intro">
                <img class="icon" src="img/icon.png" />
                <h1 class="firstheading">firstheading</h1>
                <p class="firstsub">firstsub</p>
            </div>  
        </div>
    </div>
    <div class="slide" id="slide2">
        <p class="firstsub-2">Lorem ipsum </p>
            <a href="#"><img class="playstorebutton" src="img/playstorebutton.png"></a>
    </div>
</div>

JS

$(document).ready(function() {
$('#fullpage').fullpage({
    anchors: ['home', 'page1', 'page2', 'contactus'],
    menu: '#menu'

});

setTimeout(function() {
      $(".mainlogo, .mainheading, .subheading,")
      .velocity("transition.slideUpIn" ,{stagger: 250});

        }); 

setTimeout(function() {
      $(".icon, .firstheading, .firstsub,")
      .velocity("transition.slideUpIn" ,{stagger: 250});

        }); 

});

Answer 1

使用fullpage.js回调，例如afterLoad或onLeave。

类似的东西：

$('#fullpage').fullpage({
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);

        //Section 3 loaded?
        if(index == 3){
            $(".icon, .firstheading, .firstsub,")
                .velocity("transition.slideUpIn" ,{stagger: 250});

            }); 
        }

        //Section 4 loaded?
        if(index == 4){
            setTimeout(function() {
                $(".mainlogo, .mainheading, .subheading,")
                    .velocity("transition.slideUpIn" ,{stagger: 250});

            }); 
        }


    }
});

每次在锚点上进行chaning时使用velocity.js进行动画处理？

1 个答案: