分类目录归档:HTML5应用

SVG带小图标的Checkbox美化插件

今天要给大家分享一款非常实用的checkbox复选框美化插件,这款复选框带有自定义小图标,小图标的绘制是通过SVG实现的,因此理论上你可以定义任意的图标。这款SVG复选框插件的另一个特点是,当图标没有选中时,复选框是隐藏的,鼠标滑过图标时,显示复选框,选中图片时,复选框悬浮在图标左上角并高亮显示。另外,对于选中数据的获取,跟我们普通表单提交时获取复选框选中值的方式是一样的。

svg-checkbox-group

在线演示源码下载

React 3D层叠卡片切换动画

今天给大家分享一个相当实用的React插件,我们可以利用这个插件制作一个3D视觉效果的CSS3层叠卡片切换动画,切换的内容可以是tab内容页,也可以是图片。这个插件允许我们将轮播的内容卡片分别排列在两侧,当前激活的内容则高亮居中显示,被隐藏起来的卡片大小逐渐变小,有一种3D立体的动画效果,点击两侧切换按钮就可以循环播放图片或者卡片内容了。

css3-3d-carousel

在线演示源码下载

基于Splitting.js的CSS3魔幻文字动画特效

今天给大家分享一款很不错的CSS3文字动画特效,它主要给用户在选择下拉框时呈现一种比较魔幻可怕的动画场景。这个动画使用了Splitting.js将单词拆分成一个个字母,然后通过CSS给字符添加背景图片,然文本拥有背景渲染的视觉效果。同时当我们下拉选项时,下拉框中的文本将会出现闪烁发光的动画效果,文本选中后,网页的背景图片也会以渐变的方式改变为对应文本的背景图片。

css3-splitting-text

在线演示源码下载

HTML5调用摄像头识别双手

今天给大家介绍的是一款HTML5调用本地摄像头,然后识别人体的手掌的动画应用。当HTML5调起本地摄像头后,你只要在镜头前挥动你的双手,摄像头就会自动识别,并且在视频中显示,更厉害的是,它可以精确识别到手指手腕的关节,并且在你伸展手指时,相应的关节部位的节点就会随着伸展联动。这当然用到了一些JS库,你可以下载源码了解详情。另外,这款应用要部署在服务器上才可以运行,本地无法使用。

html5-camera-hands

在线演示源码下载

SVG路径遮罩实现图片颜色任意替换

我们知道Svg可以构造任意的路径,绘制出任意的平面图形甚至是类3D的图形画面。今天我们要介绍的就是一款利用SVG路径遮罩实现图片颜色的任意替换功能。这里我们以沙发图片为例,我们可以任意更改沙发的颜色及其背景颜色。原理是利用SVG绘制沙发的路径结构,然后用选择的颜色填充路径即可。如果你要换一款沙发或者别的产品,那么这个路径就需要重新计算。这款应用比较适合一些电子商务平台的商品展示,我们不需要为每一款颜色都提供图片。当然如果商品图片有不同的色块,那也不太适合这个工具。

svg-color-sofa

在线演示源码下载

HTML5 无限循环滚动图片流

今天给大家带来一款很实用的HTML5图片播放插件,与一般的焦点图播放形式不同,这款插件是略微带有3D效果的横向无限循环滚动图片流。我们可以通过拖动滚动条、滚动鼠标滚轮、以及点击上一张下一张按钮来滚动图片,其特点是当前图片会放大高亮显示在屏幕中央,其余图片则缩小后在显示在两侧,同时图片流是无限循环的,因此不用担心滚动到最后一张照片后还需要手动倒退回去,浪费时间。

html5-infinite-flow

在线演示源码下载

HTML5 3D 神秘游戏场景动画

今天分享的是一个基于Three.js的HTML5 3D动画,这个动画模拟了游戏中的一个炫酷的3D场景,支持360度视角查看,也支持鼠标滚轮进行缩放。画面中主要展现了一个游戏中传送门的效果,同时还有路两边的围栏、灯笼、石头,以及星光闪闪的萤火虫,整个画面显得十分神秘。不得不说,threejs作为webgl的上层库,基本可以满足我们动画制作的大部分需求。

html5-3d-game-scene

在线演示源码下载

HTML5 3D无限循环图片流

这是一款基于HTML5的3D无限循环图片流,它模拟了以前Mac Dock菜单栏的设计方式,每一张图片都有倒影,因此给人一种3D立体的视觉效果。另外,我们不仅可以通过鼠标拖拽来滚动切换图片,而且可以通过鼠标滚轮来切换。拖拽可以控制滚动的速度,而且这个图片流是可以无限循环的,不管有多少图片,都可以加入到这个图片流中进行展示。

html5-3d-infinite-flow

在线演示源码下载

HTML5 3D 视差相册画廊

这是一个基于HTML5和CSS3的3D视差相册画廊,画廊中的图片围成一个圆环,拖拽鼠标可以让图片在环形画廊中滚动切换,并且将鼠标滑过图片时,图片也会产生高亮效果,形成一种3D的视差效果。另外,我们可以在次基础上稍微扩展一下,有兴趣的同学可以自己改造一下,就是鼠标点击图片时,可以展开原图,这样我们就可以浏览图片的具体细节了。

html5-3d-parallax-photos

在线演示源码下载

HTML5 Canvas 照片撕裂切换动画

这是一个很有意思的HTML5 Canvas图片切换动画,我们可以用鼠标或者手指在屏幕上滑动,将照片撕成两半,然后再切换成另外一张新的照片。这个特效不足的地方在于,所有照片的撕裂裂纹都是一样的,这可能会显得不是那么逼真。如果你有一个相册应用,个人认为可以将这个效果添加到你的相册照片删除功能上,看到哪张照片不爽,直接将它撕成两半,是不是很过瘾。(注:该动画本地无法运行,需要上传到服务器才可以使用)

html5-canvas-photo-tear

在线演示源码下载