使用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
  • 1126

迷人的jQuery的菜单网站导航

迷人的jQuery的菜单网站导航 jQuery的菜单潮流网站导航最近。 jQuery的菜单,使用简单,跨浏览器兼容的jQuery改造树菜单中点击和显示树状菜单。虽然,这个模块是类似于DHTML菜单和J...
  • kriyaon
  • kriyaon
  • 2014年08月23日 09:05
  • 385

jquery单页网站导航插件One Page Nav

  • 2014年07月06日 23:25
  • 12KB
  • 下载

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

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

超酷页面左侧导航菜单

  • 2013年03月08日 16:20
  • 27KB
  • 下载

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

使用jQuery email check插件开发带有email域名拼写错误校验功能的超酷动态留言版系统 日期:2012-4-26  来源:GBin1.com 在线演示  本地下载 很多的...

如何使用SVG生成超酷的页面预加载素描动画效果

可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。...
  • jjfat
  • jjfat
  • 2014年10月22日 15:42
  • 1045
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单
举报原因:
原因补充:

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