HTML5 Canvas和jQueryUI模糊隐藏侧边栏特效-Html5-优质IT资源分享社区

yutingzhidong
总版主
总版主
  • UID2
  • 粉丝20
  • 关注1
  • 发帖数11
  • 社区居民
  • 忠实会员
  • 原创写手
阅读:255回复:0

HTML5 Canvas和jQueryUI模糊隐藏侧边栏特效

楼主#
更多 发布于:2016-06-14 12:01
扼要教程 blurry-menu是一款作用十分酷的html5
canvas和jQueryUI含糊躲藏侧边栏特效。该侧边栏特效能够将它下面的HTML元素进行含糊处理。含糊作用是动态参加的,任安在侧边栏下方的HTML元素都将被含糊。
该特效的含糊作用是通过html2canvas和Superfast Blur这两个插件来完结的。

检查演示 下载插件
制作方法
运用该含糊躲藏侧边栏插件需求引进以下的一些依靠文件。

仿制代码
HTML结构
侧边栏的HTML结构如下


  • Menu 1



  • Menu 2



  • Menu 3


仿制代码
你能够创立一个汉堡包图标用于翻开和封闭侧边栏菜单。


CSS样式
需求给侧边栏菜单一些根本的CSS样式。
#menu {
box-shadow: 5px 5px 30px #000000;
position: absolute;
width: 0px;
overflow: hidden;
top: 0px;
left: -7px;
color: #ffffff;
}
#menu-content { position: relative; }
#blurred-bg-canvas { position: absolute; }
#captured-image { display: none; }
仿制代码
初始化插件
能够简略的通过下面的方法来触发侧边栏菜单。
BlurryMenu.openMenu();
仿制代码
这篇文章版权归于jQuery之家,转发请注明出处:
http://www.htmleaf.com/html5/html5-canvas/201507172246.html







优质IT资源分享社区为你提供此文。
本站有大量优质html5 css js等web前端开发教程视频,资料等资源,包含html5 css js 前端开发框架等基础教程,高级进阶教程等等,教程视频资源涵盖传智播客,极客学院,达内,北大青鸟,猎豹网校等等IT职业培训机构的培训教学视频,价值巨大。欢迎点击下方链接查看。
优质IT资源分享社区(www.itziyuan.top)
一个免费,自由,开放,共享,平等,互助的优质IT资源分享网站。
专注免费分享各大IT培训机构最新培训教学视频,为你的IT学习助力!

!!!回帖受限制请看点击这里!!!
!!!资源失效请在此版块发帖说明!!!

[PS:按 CTRL+D收藏本站网址~]

微信小程序开发

——“优质IT资源分享社区”管理员专用签名~

本版相似帖子

游客