如何在滚动时使用 jQuery 为 HTML 元素设置动画

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() 但是 class 没有被添加，非常感谢帮助。

谢谢

Answer 1

您可以对滚动事件进行编码并使用偏移顶部元素检查滚动值：

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