reveal.js 3D网页内容切换特效,可根据手势控制翻转(精)

使用reveal.js实现的基于网络摄像头的手势识别技术

reveal.js 的演示实例,3D幻灯片,一个HTML5+CSS3技术的3D网页内容切换特效,查看本效果请在支持CSS3/Html5标签的浏览器下运行,比如IE9、火狐、Chrome等,ie8不支持本效果。 当你打开网页后,看到灰色背景,右下角会出现一个控制按钮,可上下左右控制网页向四个方向滚动切换,视觉集中在页面中央每次切换都是以滚动的方式进行;页面不要太震撼,效果不要太绚丽,本人是被奢华3D界面所征服,前端特效设计师可以参考下啊。

这个演示的是一个更为复杂的现代浏览器超前体验,名为 手势 + Reveal.JS,这个实验使用了 WebRTC 和 JavaScript 来调用摄像头,目前只有使用谷歌浏览器才能正确的运行。该技术为用户提供了一个手势操作的界面,允许你使用手势来上下左右翻动指挥幻灯片的运行。这里的手势并不是手机触摸屏手势,而是通过电脑上连接的摄像头观察你在空中挥舞双手动作判断如何翻页。当然这种控制方式看起来并不新鲜,但再强调一遍,因为它是用纯HTML+Javascript实现的,所以它能在任何一台过去 5 年内生产的电脑上完美运行。


英文原文:http://www.hongkiat.com/blog/revealjs-html-presentation-framework/?utm_source=tuicool&utm_medium=referralgestures-reveal-js


        GitHub


赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏