jquery - JS Waypoint - 按像素在两个偏移之间进行动画处理

Question

我有以下三个 div，从 -60px 到 60px 顶部。

我想要做的是滚动是按照这个例子在滚动上以相反的方向移动第一个和最后一个div；https://noni.com.mt/（第 2 节）。

我想办法做到这一点是使用 WayPoint.js，但我不确定如何复制相同的效果。

目前我不确定如何在两个偏移量之间为用户滚动的顶部位置设置动画，所以到目前为止我唯一的代码是： -

var waypoint = new Waypoint({
  element: document.getElementById('service-1'),
  handler: function(direction) {
   if (direction === 'down') {
      $('#service-1').stop().css("top", "60px");         
   } 
  },
  offset: '90%',    
});

var waypoint = new Waypoint({
  element: document.getElementById('service-1'),
  handler: function(direction) {
   if (direction === 'up') {
      $('#service-1').stop().css("top", "-60px");
   } 
  },
  offset: '10%',    
}) 

到达每个偏移量后，它只会更改为顶部位置。如果有更简单的方法可以实现这一点，或者比航点更好的方法，请告诉我。