使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单

在线演示  本地下载

在今天的教程中，我们将使用jQuery开发一个单页面的网站，并且添加超酷的波浪动画背景效果到导航菜单上，希望大家能够喜欢！

主要开发使用插件：

• jQuery one page nav：用来生成单页面网站典型的滚动效果
• jQuery scrollTo.js：单页面插件依赖类库
• jQuery background position：用来生成动画背景效果
• jquery.animate-shadow-min.js：用来生成背景阴影效果
• jQuery easing 1.3.js：用来添加更多生成动画效果 
• Cufon-yui.js：cufon类库，用来生成更加漂亮的字体
• fixie.js：用来辅助自动生成网站中的文字

本篇文章最后将生成一个单页面的网站设计，并且生成漂亮的动态导航按钮，调试环境firefox和Chrome，如果你使用其它的浏览器，可能无法工作。请自己调试。

如何生成按钮的背景波浪动画特效？

在这里，我们将使用动画背景图片来生成波浪的动画效果，在之前的“使用jQuery background-position插件来创建超酷的导航条效果教程”中，我们介绍过类似的实现效果，唯一不同的是，这里我们需要循环的移动背景图片，生成类似的波浪效果，相关图片如下：

这是一个png格式的波浪图片，我们使用jQuery动态的在按钮后挪动这个图片，生成对应的波浪效果。如果你需要实现更逼真的效果，可以我们生成俩个背景层来生成叠加效果，使用不同的透明度可以生成远近波浪效果。并且我们通过插件可以添加按钮的阴影效果。

单页面导航

单页面导航效果非常简单，请参考以前的教程：分享一个超棒的jQuery的单页面滚动导航设计插件

相关代码

生成波浪效果的javascript：

.............

来源：使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单