GBin1.com

互联网技术分享平台

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

日期:2012-9-11  来源:GBin1.com

使用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开发超酷带有背景波浪动画的单页面网站导航菜单

阅读更多
个人分类: jquery jquery plugin
上一篇Javascript MVC架构之旅
下一篇2012年度最新免费web开发设计资源荟萃
想对作者说点什么? 我来说一句

jQ波浪动画导航菜单

2013年07月25日 116KB 下载

jquery模仿flash动画导航菜单

2014年01月15日 43KB 下载

超酷页面左侧导航菜单

2013年03月08日 27KB 下载

超酷网站导航菜单(js特效)

2008年10月06日 20KB 下载

没有更多推荐了,返回首页

关闭
关闭