1000字范文 > 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效【HTML】

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效【HTML】

时间：2020-01-17 07:24:30

web前端|html教程

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

web前端-html教程

在过去我们的文章中，我们介绍过很多不错的时间轴插件，使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示，其中比较不错的插件如下：

网狐荣耀版内核源码,vscode不能输入h,ubuntu怎么启动,tomcat 6 部署,sqlite 版权,网页设计需要多大的图,aspcms数据库,台湾服务器 ip段,wordpress采集插件中文,前端框架需要掌握哪些知识,爬虫恐惧症,php 前一天,seo管理系统,springboot理解,标签系统做的好的网站,网站上传后台在哪,js 自动填写网页表单,discuz默认模板,织梦cms后台, 跳转验证页面,学生宿舍管理系统软件,vb计算器程序代码lzw

Timeline Timelinr TimergliderJS Chronoline

龙骑战歌全套源码,vscode修改代码颜色插件,ubuntu更新自身,自带tomcat删不掉,wget爬虫工具,php 分享到微信朋友圈,外贸seo怎么分析竞争对手,网站会员系统下载电影吗lzw

使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效。

pc端网站源码,删除ubuntu开机选择,tomcat8绑定多域名,网页版爬虫软件,php怎样做到无提示下载,问答seo排名lzw

由于在我们的社区开发中，我们需要创建一个简单实用的用户时间轴应用，这里我们选择使用Timelinr来开发，并且为了使得动画过程更加丰富和有趣我们同时使用Animate.css来创建各种不同的CSS动画特效。

需要使用到的第三方插件和CSS类库如下：

Timelinr Animate.css fixie.js cufon.js

Timelinr是一个时间轴的jQuery插件实现，你可以方便的使用它来生成一个动态的时间轴特效，提供了垂直和水平显示方式，并且支持自动播放。

Animate.css是由Dan Eden开发的一套超棒的CSS动画类库，帮助你使用纯CSS来实现各种不同的动画特效。前面我们曾经专题介绍过Animate.css，如果你不了解，请阅读这篇文章：超棒的跨浏览器纯CSS动画实现 – Animate.css

fixie.js在我们以前的文章中介绍过，是一个自动帮助你填充内容的迷你类库，如果你厌倦了拷贝一堆内容的话，可以使用它来自动生成内容，个人非常喜欢，这里我将使用它来生成图片和文字内容。

这里我们使用cufon在生成更加个性化的年份，cufon.js会将制定的文字转化为画布图片。

Javascript代码

因为jQuery timelinr是一个插件，为了更好的封装它，我们这里直接修改插件内容，缺省的动画效果比较简单，只是在每个页面以放大的方式来展示图片，我们希望能够添加更多特效，这里通过添加animate.css中定义的动画class来实现。

使用animate非常简单，你只需要使用jQuery的addClass方法调用对应的类，即可实现CSS动画效果，如下：

$(‘somediv’).addClass(‘animated shake’).delay(1000).queue(function(next){ $(this).removeClass(‘animated shake’); next(); });

注意以上代码中，我们使用delay方法来延迟1秒来让动画完成，然后再将添加的class删除，以便下次再次调用addClass生成动画效果

在插件中找到相关代码，如下：

$(settings.issuesDiv+’ li’).animate({‘opacity’:settings.issuesTransparency},{queue:false, duration:settings.issuesSpeed}); $(settings.issuesDiv+’ li.’+settings.issuesSelectedClass).removeClass(settings.issuesSelectedClass).next().fadeTo(settings.issuesTransparencySpeed, 1).addClass(settings.issuesSelectedClass);

注释后，换成我们需要执行的动画：

$(settings.issuesDiv+’ li’).addClass(‘animated ‘ + cssAnimation).delay(1000).queue(function(next){ $(this).removeClass(‘animated ‘ + cssAnimation); next(); });

另外，我们使用cufon来将文字生成图片，主要需要在class变化的时候，重新调用cufon，如下：

$(settings.datesDiv+’ a.’+settings.datesSelectedClass).removeClass(settings.datesSelectedClass).parent().next().children().addClass(settings.datesSelectedClass).delay(500).queue( function(next){ next(); Cufon.refresh(); });

这里我们添加一个选项cssAnimation，缺省值为“lightSpeedIn”，这样方便我们自己定义动画类型。

settings = jQuery.extend({ orientation: ‘horizontal’, // value: horizontal | vertical, default to horizontal containerDiv: ‘#timeline’, // value: any HTML tag or #id, default to #timeline datesDiv: ‘#dates’, // value: any HTML tag or #id, default to #dates datesSelectedClass: ‘selected’, // value: any class, default to selected datesSpeed: ‘normal’, // value: integer between 100 and 1000 (recommended) or ‘slow’, ‘normal’ or ‘fast’; default to normal issuesDiv: ‘#issues’, // value: any HTML tag or #id, default to #issues issuesSelectedClass: ‘selected’, // value: any class, default to selected issuesSpeed: ‘fast’, // value: integer between 100 and 1000 (recommended) or ‘slow’, ‘normal’ or ‘fast’; default to fast issuesTransparency: 0.2, // value: integer between 0 and 1 (recommended), default to 0.2 issuesTransparencySpeed: 500, // value: integer between 100 and 1000 (recommended), default to 500 (normal) prevButton: ‘#prev’, // value: any HTML tag or #id, default to #prev nextButton: ‘#next’, // value: any HTML tag or #id, default to #next arrowKeys: ‘false’, // value: true | false, default to false startAt: 1, // value: integer, default to 1 (first) autoPlay: ‘false’, // value: true | false, default to false autoPlayDirection: ‘forward’, // value: forward | backward, default to forward autoPlayPause: 2000, // value: integer (1000 = 1 seg), default to 2000 (2segs) cssAnimation: ‘lightSpeedIn’}, options);

javascript调用如下：

$(function(){ Cufon.replace(‘#timeline a, #timeline h1′).CSS.ready(function() {$().timelinr({autoPlay:’true’, autoPlayPause:’3000′, cssAnimation:’tada’});}); });

以上代码可以看到，我们调用cufon将所有需要生成美化字体的元素都替换掉，然后调用timeliner插件，这里我们自定义动画类型为：tada，如果你需要生成其它效果，请自己修改类型。

HTML代码

HTML中我们定义了年份和每一个时间轴项目的内容，包括，文字和图片，这里代码很简单，只包含了一个框架，我们使用fixie.js来自动生成具体内容：

2001 2002

2001

2002

+ –

CSS代码

不同方向展示的时间轴，使用不同的样式文件，这里我们只列出水平时间轴样式：

* { margin: 0; padding: 0; }body { background: #222; font-family: Georgia, serif; color: #707070; font-size: 14px; }a { color: #404040; text-decoration: none; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover, a.selected { color: #808080; }h1,h2,h4,h5,h6 { text-align: center; color: #ccc; text-shadow: #000 1px 1px 2px; margin-bottom: 5px; } h1 { font-size: 18px; } h2 { font-size: 14px; } .sociales { text-align: center; margin-bottom: 20px; }#timeline { width: 788px; height: 350px; overflow: hidden; margin: 100px auto; position: relative; background: url(‘../images/dot.jpg’) left 45px repeat-x; } #dates { width: 120px; height: 60px; overflow: hidden; } #dates li { list-style: none; float: left; width: 150px; height: 50px; font-size: 24px; text-align: center; background: url(‘../images/bdot.jpg’) center bottom no-repeat; } #dates a { line-height: 38px; padding-bottom: 10px; color: #CCC; }#dates .selected { font-size: 30px; color: #5DB0E6; padding-bottom: 12px; background: url(‘../images/bdot1.jpg’) center bottom no-repeat; }#issues { width: 788px; height: 350px; overflow: hidden; } #issues li { width: 788px; height: 350px; list-style: none; float: left; } #issues li.selected img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } #issues li img { float: left; margin: 10px 30px 10px 50px; background: transparent; -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)”; /* IE 8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);/* IE 6 & 7 */ zoom: 1; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transform: scale(0.7,0.7); -moz-transform: scale(0.7,0.7); -o-transform: scale(0.7,0.7); -ms-transform: scale(0.7,0.7); transform: scale(0.7,0.7); } #issues li h1 { color: #5DB0E6; font-size: 48px; margin: 20px 0; text-shadow: #000 1px 1px 2px; } #issues li p { font-size: 14px; margin-right: 70px; font-weight: normal; line-height: 22px; text-shadow: #000 1px 1px 2px; }#grad_left, #grad_right { width: 100px; height: 350px; position: absolute; top: 0; } #grad_left { left: 0; background: url(‘../images/grad_left.jpg’) repeat-y; } #grad_right { right: 0; background: url(‘../images/grad_right.jpg’) repeat-y; }#next, #prev { position: absolute; top: 0; font-size: 70px; top: 170px; width: 22px; height: 38px; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; overflow: hidden; } #next:hover, #prev:hover { background-position: 0 -76px; } #next { right: 0; background-image: url(‘../images/next.jpg’); } #prev { left: 0; background-image: url(‘../images/prev.jpg’); } #next.disabled, #prev.disabled { opacity: 0.2; }

全部代码书写完毕，大家可以查看在线演示来浏览效果，如果你有更好的建议，请给我们留言，谢谢！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。