向联系表单添加动画答案

【问题标题】：Adding an animation to a contact form向联系表单添加动画
【发布时间】：2014-04-10 08:59:35
【问题描述】：

如果有人可以让我走上正确的道路，那就太棒了！我一直在搜索和阅读类似这样的教程，但我无法弄清楚！

我正在尝试对联系表做同样的效果：http://clapat.ro/themes/newave/

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

顺便说一句，我正在使用引导程序。任何人？谢谢

【问题讨论】：

你是指动画中的淡入淡出吗？
skrollr.js 库可能吗？ prinzhorn.github.io/skrollr
问题不清楚。您需要对焦点进行淡入/淡出效果吗？
@CarstenLøvboAndersen 是的，表单如何从左侧淡入
@Jahnux73 太棒了！这实际上看起来非常适合我的需要，现在就必须深入研究它！

标签： jquery css twitter-bootstrap css-transitions css-animations

【解决方案1】：

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

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

希望对你有帮助

【讨论】：

很酷的小猫东西看起来也可以工作！谢谢

【解决方案2】：

这里是一些 Jquery 代码示例，您可以使用它来制作您想要的效果。

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

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

这是一个fiddle 的动画（向下滚动查看效果）

编辑：请记住，您可以更改 jQuery 的效果，使其看起来比我的示例更流畅。

【讨论】：

好吧，这就是我要找的！我很可能也会使用上面的库，但我对它的工作原理很感兴趣！感谢您的出色工作，也感谢其他所有人！