html5动效系列六:分享8个超酷的HTML5相册动画应用

2015-5-8    蓝蓝设计的小编

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

每一个扁平化界面设计,都是我们的心灵碰撞致力于最棒的 metro ui 设计

来源:http://www.html5tricks.com/8-cool-html5-gallery.html

 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

HTML5、CSS3和jQuery这3大前端开发技术已经越来越成熟,而且这三者的紧密结合使得开发者可以有越来越丰富的想象空间。今天我们要来分享一些非常炫酷的HTML5相册动画应用,这些应用同时也结合了CSS3和jQuery,特别是第一个,非常具有创意,一起来看看吧。

1、HTML5 3D立体美女墙相册

HTML5非常强大,尤其是和CSS3结合,有时候能达到非同凡响的网页动画效果。今天要分享的这款HTML5应用就是一款很酷的3D立体图片相册应用,它可以用鼠标多拽从多个角度浏览相册图片,点击图片,就可以放大图片,相册图片都是美女,千万别让女朋友看到。

html5-3d-image-gallery

在线演示        源码下载

2、jQuery/HTML5响应式焦点图动画应用

之前我们分享过不少基于jQuery和HTML5的焦点图动画了,比如这里10款精美实用的jQuery焦点图动画推荐就有不少收集的jQuery焦点图插件,效果非常棒。今天要继续为大家介绍一款jQuery/HTML5响应式焦点图动画插件,它的响应式特性可以让焦点图在移动设备上也有不错的效果。

jquery-html5-responsive-slider

在线演示        源码下载

3、jQuery垂直缩略图相册插件 支持鼠标滑动翻页

这是一款支持鼠标拖拽的jQuery相册插件,这款jQuery相册的特点是右侧有一排垂直的缩略图,可以定义任意数量的图片,并且可以使用鼠标拖拽来对缩略图进行翻页浏览。另外,相册的图片切换支持自动切换,也支持鼠标点击按钮切换和鼠标滑动切换。

jquery-ver-gallery-slider

在线演示        源码下载

4、超炫酷的jQuery轮播焦点图 底部带切换缩略图

前面我们刚刚分享过一款jQuery/HTML5响应式焦点图动画应用,效果非常炫酷。这次我们再来分享一款基于jQuery的图片轮播焦点图,这款jQuery焦点图的特点是整个图片播放器是宽屏的效果,并且在焦点图底部有一排可以滑动的缩略图,点击缩略图可以快速跳转到相应的图片。

jquery-cool-image-slider-thumb

在线演示        源码下载

5、HTML5 3D相册图片轮播动画

这是一款基于HTML5和CSS3的3D相册浏览插件,它可以将相册中的图片以3D的方式展示出来,并且你可以滑动下面的滑杆来滑动图片浏览,同时,我们也可以指定数字让其直接跳转到指定的图片。这款HTML5 3D图片轮播动画用起来非常棒。

html5-3d-gallery-animation

在线演示        源码下载

6、jQuery/CSS3动画相册图片浏览插件

之前我们分享过一款基于jQuery的仿QQ空间相册浏览插件,功能上已经十分完善,但是缺少动画效果。今天这款jQuery相册插件正好弥补了动画的缺陷,由于CSS3特性的利用,当我们点击图片浏览的时候,缩略图就会以淡入淡出的动画效果消失,然后出现原始图片。同时你也可以点击左右按钮来逐一浏览相册中的图片。

jquery-css3-gallery-animation

在线演示        源码下载

7、jQuery/CSS3实现拼图效果的相册插件

今天我们要来分享一款很酷的jQuery相册插件,首先相册中的图片会以一定的角度倾斜放置在页面上,点击图片缩略图就可以展开图片,并且图片是由所有缩略图拼接而成,图片展开和收拢的动画效果也非常不错。当然图片倾斜需要CSS3支持。

jquery-css3-join-image

在线演示        源码下载

8、CSS3动画相册 图片淡入淡出动画效果

这是一款基于CSS3的动画相册,这样的相册我们之前也分享过不少,比如HTML5 3D立体图片相册。非常的华丽。今天的这款CSS3相册相对比较实用,当鼠标划过缩略图时,原图片即会以淡入淡出的动画效果展现出来,大家可以将它应用在自己的网站上。

css3-animated-gallery

在线演示        源码下载

以上就是8个超酷的HTML5相册动画应用,欢迎收藏分享。

 

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档