使用waypoints.js和animate.css滚动动画

Question

我希望屏幕上有两个元素动画 - 一个是文本，另一个是图像。每次滚动时，我都希望文本A淡出并替换为文本B.此外，在每个滚动条上，我希望图像B淡入并显示在图像A旁边。

我是jquery的新手，但看起来像waypoint.js和animate.css可能能够做我想要的。这有可能，你会怎么做呢？

下面就我所知，我试图通过改变偏移值来使第一部分工作。我认为它没有按预期工作，因为我的页面上没有足够的内容可以滚动。

http://jsfiddle.net/nuq61wpd/

//CSS
.os-animation{
     opacity: 0;
}

.os-animation.animated{
    opacity: 1;
}

//HTML

<div class="os-animation" data-os-animation="fadeIn">
    <h1>This section will fade in</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="os-animation" data-os-animation="fadeIn">
    <h1>This section will fade in</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>


//JavaScript

function onScrollInit( items, trigger ) {
  items.each( function() {
    var osElement = $(this),
        osAnimationClass = osElement.attr('data-os-animation');

        var osTrigger = ( trigger ) ? trigger : osElement;

        osTrigger.waypoint(function() {
          osElement.addClass('animated').addClass(osAnimationClass);
          },{
              triggerOnce: true,
             offset: '90%'
        });
  });
}

onScrollInit( $('.os-animation') );