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

您可以对滚动事件进行编码，并使用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');
        }
    });

如何在滚动上使用jQuery动画HTML元素

1 个答案: