如何在滚动页面上使用jQuery动画

Question

我有这个标记

​

            <div class="box-1 box">
                    <img src="img/interaction design.gif">
                    <h2>Interaction Design</h2>
                    <p class="description">Form follows function. Solution marries aesthetics. <br>
                        We help you design beautiful intuitive experiences through the 
                        use of UX/UI principles.
                    </p>

                    <p class="explanation">
                        - Website Design <br>
                        - Mobile Apps <br>
                        - Visual Style Guide <br>
                        - IA &amp; Wireframing
                    </p>
            </div>

            <div class="box-2 box">
                    <img src="img/graphicdesign.png">
                    <h2>Graphic Design</h2>
                    <p class="description">People are more likely to trust something that looks
                        good. I mean, you're reading this far because of that same reason. Right? Right.
                    </p>

                    <p class="explanation">
                        - Digital Graphics <br>
                        - Print Design <br>
                        - Custom Illustrations
                    </p>
            </div>

            <div class="box-3 box">
                    <img src="img/webdev.png">
                    <h2>Web Development</h2>
                    <p class="description">In order to give you and your business the best online experience
                        we can help you with your website and take your experiences up a notch with more
                        "Ooo's" and "Aah's" using the best methods available.
                    </p>

                    <p class="explanation">
                        - Front and Backend <br>
                        - Online Marketing <br>
                        - Search Machine Optimization
                    </p>
            </div>

    </div>

当我向下滚动时，我想让'box-1‘和'box-2’等元素从底部淡入，为此我使用了Animate Css，我的JavaScript看起来像这样：

var animationName = 'fadeInUp';
var animationEnd = 'animationend oAnimationEnd mozAnimationEnd                       webkitAnimationEnd';

$(function() {
    if ( $(window).scrollTop() === $('container-2').offset() ) {
        $('.box-1').addClass(animationName);
    } else {
        $('.box-1').removeClass(animationName);
    }
})

我也尝试过$(window).height()，但是没有添加这个类，非常感谢您的帮助。

谢谢

Answer 1

您可以对scroll事件进行编码，并使用offset top元素检查滚动值：

  $(window).scroll(function (event) {
        var scroll = $(window).scrollTop();
       if (scroll == $('.container-2').offset().top ) {
        $('.box-1').addClass('animationName');
        }else {
            $('.box-1').removeClass('animationName');
        }
    });