用velocity.js实现页面滚动切换效果

 

 
 

页面滚动切换效果

原文链接:http://www.gbtags.com/gb/share/5650.htm

今天介绍一个Javascript小型的动画插件velocity.js,可以方便高效的开发一个具有多页面滚动切换效果的网站。

浏览器支持

velocity.js支持IE8+、Chrome、Firefox等浏览器,并支持Andriod以及IOS。 

我们开发一个工程,里面有一组相关联系的大型页面。不能做到在一张页面中把它们展现出来,同时又希望能够有效的阅读到这些相关内容,可以通过做一些有趣的效果来帮住我们实现,通过页面滚动切换效果,可以很有效的制作一个吸引人眼球的网页。

所有的特效应用都是通过velocity.jsVelocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能,它是jQuery、 jQuery UICSS变换 在动画方面的最佳组合。Velocity.js在内部实现中使用了jQuery的$.queue()方法,因此它比 jQuery的$.animate()$.fade()$.delay()方法更加流畅,其性能也高于CSS的animation属性

所有的效果在小型终端都无法实现展示,例如手机和智能手表。所以最好在web上面来展示他的功能,但是对于小型终端我们也做了相应的适配,以便于浏览

要点

  • velocity.jsjQuery的动画插件,具有更快更高效的动画切换效果
  • 2014年5月3日,julian在其GitHub上发布了velocity.js
  • velocity.js是一款小而强大的插件                      

 下面我们来研究它的具体实现方法 

为了应用动画和滚动效果,我们必须得在<body>标签中进行data-hijacking和data-animation自定义的设置来实现这一功能
  1. <bodydata-hijacking="off"data-animation="scaleDown">

以上代码的意思是启动动画效果data-animation为按比例缩减scaleDowndata-animation一共定义了7种不同的动画效果,分别为scaleDown,rotate,fixed,gallery,parallax,opacity,catch.我们可以根据自己的需求,进行任意一种效果的应用。并且我将示例代码做了7个页面来分别呈现它的效果。设置数据拦截属性data-hijacking为关闭,你也可以设置为on,来展示它的效果。以上两个属性均来自velocity.js

html中Dom结构

原文链接:http://www.gbtags.com/gb/share/5650.htm

在这个结构中我们想展示5个不同的一组页面,我们把他分为五个<section>,同时定义了2个用来进行切换作用的图标按钮

这是一个相对来说比较复杂的效果,需要大量的js事件处理和插件函数调用,大家学习起来肯定相对比较复杂。建议先整理清楚逻辑思路之后,在看文章,并且依据文章要点去阅读源代码。如果大家对velocity.js插件感兴趣,可以去了解它的其他效果作用。并且欢迎大家和我一起互动,有什么不懂的地方欢迎小伙伴们留言哦~~

喜欢我文章的小伙伴们可以关注我哦,之后我还会继续写相关的一系列文章。嘻嘻~~

 

原文链接:http://www.gbtags.com/gb/share/5650.htm

 

你可能感兴趣的:(JavaScript)