使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
译者 jjfat
在过去我们的文章中,我们介绍过很多不错的 时间轴插件,使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示,其中比较不错的插件如下:
使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效。
由于在我们的 gbtags.com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用 Animate.css来创建各种不同的CSS动画特效。
需要使用到的第三方插件和CSS类库如下:
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);来源: 使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
相关 [jquery timelinr animate] 推荐:
使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
- - 译言-电脑/网络/数码科技adobe神器Animate教程:创建HTML5动画(二)
- - 优设(UISDC)神器Animate教程:使用SpriteSheet创建HTML5动画
- - 优设(UISDC)JQuery 选择器
- - CSDN博客Web前端推荐文章点击我
. 像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.点击我
. //给class为demo的元素添加行为.