Question

如果有人能把我放在正确的道路上会很棒！我一直在寻找和阅读这样的教程，但我无法弄清楚！

我正在尝试对联系表单执行相同的操作：http://clapat.ro/themes/newave/

当您滚动到表单时，它会像该页面上的许多其他元素一样弹回屏幕。

我也在使用bootstrap btw。任何人？谢谢

Answer 1

如果你想和这个网站做同样的设计，可以在你的bootstrap样式表中添加“cool kitten”： http://jalxob.com/cool-kitten/

对于动画，如果你想做类似“反弹”的事情，你可以使用JqueryUI反弹事件： http://api.jqueryui.com/bounce-effect/

希望它能帮到你

Answer 2

以下是一些可用于实现所需效果的Jquery Code示例。

$(window).scroll(function () {
    if ($(this).scrollTop() > 125) {
        $('#DivYouWantToAnimate').css('visibility', "visible").animate({ paddingLeft: "150px", opacity: '1' }, 'slow');
    }
});

请记住将要设置动画的Div的默认值设置为Visibility：Hidden;所以它只会在你向下滚动时显示出来。

这是带有动画的fiddle（ScrollDOWN以查看效果）

编辑：记住你可以改变jQuery的效果，使它看起来比我的例子更加流畅。

将动画添加到联系表单

2 个答案: