Javascript Skrollr：如何根据滚动方向设置不同的关键帧动画？

我正在使用基于滚动的动画。我很难根据用户上下滚动的不同，在某个关键帧上显示动画，但其他一切都很好。以下是相关代码（最后一部分，data emit events，是问题的关键）：

和脚本调用：

    <script type="text/javascript">
    var $trans = $('.introTransition');
    skrollr.init({forceHeight:false, smoothScrolling:true,
    keyframe: function($trans, data125, up) { //element, name, direction
        //name will be one of data500, dataTopBottom, data_offsetCenter
        console.log('yesssss');
        $('.introTransition').css({'height':'50%'});
    }
    });
    </script>

变量$trans=$（'.introTransition'）；
skrollr.init（{forceHeight:false，smoothScrolling:true，
关键帧：函数（$trans，data125，up）{//元素，名称，方向
//名称将是data500、dataTopBottom、data_offsetCenter中的一个
console.log（'yesss'）；
$（'.introTransition'）.css（{'height'：'50%}）；
}
});

我不知道为什么这不起作用。我只是看错了文件吗

谢谢你的阅读

编辑：这里有一个JSbin的例子来演示我的问题

答：请参阅Prinzhorn的JSbin，以了解有效的解决方案。我把关键帧的语法搞错了。

<script type="text/javascript">
// first get the element that you want to listen to its keyframe event
var $trans = $('.introTransition');

skrollr.init({forceHeight:false, smoothScrolling:true,
keyframe: function(element, name, direction) { //element, name, direction
    //name will be one of data500, dataTopBottom, data_offsetCenter
    // see the first criteria, we check if element match the element we selected above
    if(element == $trans && name == "data125" && direction == "up")
    {
        console.log('yesssss');
        $('.introTransition').css({'height':'50%'});
    }
}
});
</script>

//首先获取要侦听其关键帧事件的元素
变量$trans=$（'.introTransition'）；
skrollr.init（{forceHeight:false，smoothScrolling:true，
关键帧：函数（元素、名称、方向）{//元素、名称、方向
//名称将是data500、dataTopBottom、data_offsetCenter中的一个
//查看第一个条件，我们检查元素是否与上面选择的元素匹配
if（元素==$trans&&name==“数据125”&&direction==“向上”）
{
console.log（'yesss'）；
$（'.introTransition'）.css（{'height'：'50%}）；
}
}
});

如果您可以发布一个演示页面，例如在jsbin上，那将是最好的。这里有一个指向jsbin的链接：我希望在向上滚动时$trans仅在关键帧125（data-125）处显示为红色。“仅在关键帧125处”是什么意思？你想让它在用户滚动时快速闪烁红色吗？我应该更清楚：我需要$trans在data-125和data-250之间变为红色（这样它在data-125处变为红色，然后在data-250处停止变为红色），但只有在向上滚动时才可以。“但只有在向上滚动时”部分才是问题所在。在代码中有一个描述总是好的。您可以编辑答案以包含一个答案。

<script type="text/javascript">
// first get the element that you want to listen to its keyframe event
var $trans = $('.introTransition');

skrollr.init({forceHeight:false, smoothScrolling:true,
keyframe: function(element, name, direction) { //element, name, direction
    //name will be one of data500, dataTopBottom, data_offsetCenter
    // see the first criteria, we check if element match the element we selected above
    if(element == $trans && name == "data125" && direction == "up")
    {
        console.log('yesssss');
        $('.introTransition').css({'height':'50%'});
    }
}
});
</script>