10个非常炫酷的jQuery相册动画赏析

开发 前端
我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件 都运用了CSS3的相关特性,形成了许多炫酷的动画特效。本文收集了10个比较经典炫酷的jQuery相册动画,希望大家喜欢。

我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件 都运用了CSS3的相关特性,形成了许多炫酷的动画特效。本文收集了10个比较经典炫酷的jQuery相册动画,希望大家喜欢。

1、HTML5/CSS3图片左右切换弹性动画

这是一款很有特点的HTML5图片切换动画,点击左右按钮即可将图片进行弹性切换,图片在被切换时,都会产生一定的弹性缓冲动画效果。这款HTML5图片应用非常适合在产品宣传页面上使用,看上起十分大气。

html5-css3-elasticity

在线演示        源码下载

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

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

jquery-css3-join-image

在线演示        源码下载

3、jQuery幻灯片播放器插件 可自动播放图片

今天我们要再介绍一个jQuery幻灯片播放器插件,它的功能很齐全,不仅可以手动切换图片,而且可以开启和关闭自动播放图片功能。另外,还可以展开缩略图列表迅速预览所有图片。

jquery-auto-image-player

在线演示        源码下载

4、HTML5 3D相册浏览 震撼人心

今天我们再来看一款HTML5 3D相册浏览应用,图片可以手动播放,也可以自动播放,效果非常震撼,赶紧把这款HTML5 3D相册分享给你的朋友吧。

html5-3d-gallery

在线演示        源码下载

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

今天这款jQuery相册插件正好弥补了动画的缺陷,由于CSS3特性的利用,当我们点击图片浏览的时候,缩略图就会以淡入淡出的动画效果消失,然后出现原始图片。同时你也可以点击左右按钮来逐一浏览相册中的图片。

jquery-css3-gallery-animation

在线演示        源码下载

6、HTML5 TweenMax.js和jQuery实现的3D图片动画

TweenMax是一个很常用的动画制作框架,TweenMax.js是TweenMax的JS版本,今天我们就结合TweenMax.js和HTML5来实现一款超炫的3D图片墙动画,几张图片围成一个围墙,然后图片墙可以随着鼠标的移动而旋转,旋转速度可以根据鼠标来变化,非常酷的HTML5 3D动画应用。

html5-3d-carousel

在线演示        源码下载

7、jQuery/CSS3实现全屏图片滑块焦点图动

今天我们要来分享一款非常大气的jQuery/CSS3全屏焦点图插件,这款焦点图有以下几个特点:首先图片可以全屏切换滑动,显得非常大气;其次焦点图有缩略图导航,点击缩略图可以切换至相应的图片;最后就是图片有阴影,配合天空白云的背景,像是浮动一样,非常立体。

jquery-css3-image-slider

在线演示        源码下载

8、HTML5 3D立体图片相册

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

html5-3d-image-gallery

在线演示        源码下载

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

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

css3-animated-gallery

在线演示        源码下载

10、jQuery/CSS3相册浏览插件 相册图片滤镜效果

这是一款基于jQuery和CSS3的超酷相册浏览插件,当我们滑过相册图片的缩略图时,图片即会产生滤镜效果,由灰色编程彩色,同时图片周围产生不错的阴影效果。点击缩略图时,我们将开始浏览相册的原始图片,我们点击右上角的关闭按钮即可回到相册缩略图模式。

jquery-css3-simple-gallery

在线演示        源码下载

以上就是10个非常炫酷的jQuery相册动画赏析,希望对你有所帮助。

本文链接:http://www.codeceo.com/article/10-cool-jquery-gallery.html

 

责任编辑:王雪燕 来源: 码农网
相关推荐

2010-12-13 13:33:23

jQuery相册

2011-09-02 13:57:11

jQuery

2011-03-03 10:16:46

jQueryJavaScript

2022-07-21 07:05:13

粒子动画CSS

2014-08-21 14:56:19

2021-05-10 10:18:54

工具代码开发

2015-12-01 09:52:03

CSS3动画源码

2017-07-18 16:00:09

炫酷动画开源框架APP

2015-07-09 09:00:43

C#Winform透明动画

2016-01-25 09:49:20

jQuery图片滑块动画

2019-07-12 09:18:22

IntelliJ ID插件插件库

2024-02-22 13:55:41

前端动画库

2015-10-08 08:48:44

HTML5canvas动画

2023-11-04 15:53:51

开源JavaScrip

2016-07-21 14:36:34

操作系统Linux终端命令

2020-01-03 10:50:16

Python编程语言Mac电脑

2019-07-01 08:45:00

开发者技能工具

2009-09-02 09:35:55

2015-10-20 15:58:28

弹力菜单android源码

2022-02-11 16:01:14

C语言技巧命令
点赞
收藏

51CTO技术栈公众号