<section>
        <h1>沒有加入任何的動畫特效</h1>
        <p>原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
    </section>
    
    <section class="animation" data-animation="fadeInLeft" data-animation-delay="0s">
        <h1>由左至右淡出</h1>
         <p>原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
    </section>
    <section class="animation" data-animation="swing" data-animation-delay="0s" style="border:solid 2px red;">
        <h1>搖擺彈出</h1>
         <p>原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
    </section>
    <section class="animation" data-animation="shake" data-animation-delay="1s">
        <h1>延遲1s/再左右晃動</h1>
         <p>原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
    </section>
    <section class="animation-container" style="border:solid 5px blue; overflow: hidden;">
        <h1>交錯(每隔0.3s)由右向左淡出</h1>
        <p class="animation" data-animation="fadeInRight" data-animation-delay="0.3s">原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
<p class="animation" data-animation="fadeInRight" data-animation-delay="0.6s">原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
<p class="animation" data-animation="fadeInRight" data-animation-delay="0.9s">原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰，原來不是老花！是眼睛調節力變差！蔡司智銳數位3C鏡片，讓閱讀更輕鬆、看遠看近都清晰</p>
</section>

 .animation{
  opacity: 0;
}

.animated{
  opacity: 1;
}
section{
  height:100vh; 
  border-bottom:solid 1px #ccc;
}

        $(function(){
            function onScrollInit( items, trigger ) {
                items.each( function() {
                var element = $(this),
                    animationClass = element.attr('data-animation'),
                    animationDelay = element.attr('data-animation-delay');

                    element.css({
                        '-webkit-animation-delay':  animationDelay,
                        '-moz-animation-delay':     animationDelay,
                        'animation-delay':          animationDelay
                    });

                    var Trigger = ( trigger ) ? trigger : element;

                    Trigger.waypoint(function() {
                        element.addClass('animated').addClass(animationClass);
                        },{
                            triggerOnce: true,
                            offset: '90%'
                    });
                });
            }

            onScrollInit( $('.animation') );
            onScrollInit( $('.animation'), $('.animation-container') );
});