Question

我目前正在投资我的投资组合网站。我的网站严重依赖于滚动动画，而我正在使用skrollr js来做到这一点。我现在拥有的是demo，这是在Dev.Opera上调整僵尸视差教程版本的结果。这个polished version of zombie parallax有我正在寻找的东西，在动画的不同部分暂停。

在我的项目中，当我接近旗帜和地标时，我希望暂停角色，我希望这些元素从地面升起，然后文字的简短描述将淡入（或者不知道我不确定但是过了一会儿，角色需要继续移动，那些地标需要从视口移动到左边，所以看起来角色正在旅行。

我查看了skrollr github页面上的暂停示例，但我无法绕过它，所以如果有人能帮助我，我会非常感激。

Answer 1

不是skrollr专家，而是@sujan：

<div id="scene" class="gradient">
    <div id="ground" class="parallax-layer" data-0="left:0px;" data-3300="left:-500px;" data-4500="left:-500px;"  data-5000="left:-1500px;"></div>
    <div class="parallax-layer">
        <div id="swayambhu" class="birthplace" data-0="left:2100px;" data-3300="left:700px;" data-4500="left:700px;" data-5500="left:-400px;"></div>
        <div id="dharahara" class="birthplace" data-0="left:2000px;" data-3300="left:600px;" data-4500="left:600px;" data-5300="left:-300px;"></div>
        <div id="nepal-flag" class="birthplace" data-0="left:1800px;"data-3300="left:400px;" data-4500="left:400px;" data-5000="left:-300px;"></div>
        <div id="character"></div>
    </div>
    <div id="sujan-title" data-0="left:0px;" data-3500="left:-3000px;"></div>
    <div id="start" data-0="left:0px;" data-3500="left:-2000px;">Scroll down or press "DOWN" key to move</div>
</div>

并在变量上调用skrollr：

var animate = skrollr.init({});

这样你可以使用滚动动画功能，如：

animate.getScrollTop() etc.

Skrollr JS - 暂停某些元素以执行其他滚动动画

1 个答案: