【问题标题】:Animate image inside scrolling div滚动div内的动画图像
【发布时间】:2017-03-05 10:24:24
【问题描述】:

上周我一直在尝试找到一种方法来让 div/图像在可滚动的 div 内进行动画处理。我已经尝试过wow.js(使用animate.css)和aos.js,它们都不能在我被告知的容器div中工作。

我尝试了Waypoints,在尝试了This Solution 之后没有运气,我开始认为这是不可能的,但我希望被证明是错误的。我想使用 animate.css,因为它有我喜欢的动画并且很容易处理,但如果这不是一个选项,那就这样吧。

【问题讨论】:

    标签: jquery css animate.css


    【解决方案1】:

    你没有提到你想要什么样的动画。但这可能会让您开始滚动 div 动画:(只需向下滚动到底部)

    $(document).scroll(function () {
        var y = $(this).scrollTop();
        if (y > 800) {
            $('.bottomMenu').fadeIn();
        } else {
            $('.bottomMenu').fadeOut();
        }
    
    });
    body {
        height:1600px;
    }
    .bottomMenu {
        display: none;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 60px;
        border-top: 1px solid #000;
        background: red;
        z-index: 1;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <div class="bottomMenu"></div>

    【讨论】:

    • 我似乎无法让它在我正在处理的页面上工作。如果我不放 display:none 图像看起来非常小。如果我确实放了它,它会缩小差距,什么也不会发生。无论如何,图像仍然没有动画。你可以在这里看到我正在使用的东西 - smappdooda.com/new/about2.php
    • @Bizzaro 尝试将.content div 而不是document 绑定到动画。例如:$(".content").scroll(function () .......rest of code same
    • 抱歉耽搁了。我出城了。似乎没有变化。
    猜你喜欢
    • 2021-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多