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

原创 2012年09月12日 15:29:03

日期: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教程中,我们将介绍如何使用jQuery和其它相关的插件来生成一个漂亮的带有密码强度检验的注册页面,希望大家喜欢! 在线演示 相关的插件和类库  complex...
  • jjfat
  • jjfat
  • 2015-07-24 12:20
  • 1021

分享27个最新国外超酷单页面网站设计

日期:2012-5-6  来源:GBin1.com 越来越多的网站开始使用单页面的网站设计,因为单页面网站设计简单直观,可以使用夸张的字体和超酷的插图展示,正是这些原因使得单页面设计在2012年赢得...
  • jjfat
  • jjfat
  • 2012-05-07 13:43
  • 1033

超酷页面左侧导航菜单

  • 2013-03-08 16:20
  • 27KB
  • 下载

使用jQuery email check插件开发带有email域名拼写错误校验功能的超酷动态留言版系统

日期:2012-4-26  来源:GBin1.com 在线演示  本地下载 很多的网站或者web应用都需要你填写电子邮件地址,而这个过程中,用户往往会拼写错误的电子邮件域名,今天我们将给...
  • jjfat
  • jjfat
  • 2012-04-27 19:48
  • 724
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)