velocity.js实现页⾯滚动切换效果
今天介绍⼀个Javascript的⼩型的动画插件velocity.js，可以⽅便⾼效的开发⼀个具有多页⾯滚动切换效果的⽹站。
浏览器⽀持
velocity.js⽀持IE8+、Chrome、Firefox等浏览器，并⽀持Andriod以及IOS。
我们开发⼀个⼯程，⾥⾯有⼀组相关联系的⼤型页⾯。不能做到在⼀张页⾯中把它们展现出来，同时⼜希望能够有效的阅读到这些相关内容，可以通过做⼀些有趣的效果来帮住我们实现，通过页⾯滚动切换效果，可以很有效的制作⼀个吸引⼈眼球的⽹页。
所有的特效应⽤都是通过velocity.js。Velocity.js是⼀款动画切换的jQuery插件，它重新实现了jQuery的jQuery.animate()⽅法从⽽加快动画切换的速度。Velocity.js只有7k的⼤⼩，它不仅包含了jQuery.animate()的所有功能，并且还包含了颜⾊切换、转换(transform)、循环、缓动、CSS切换、Scroll功能，它是jQuery、 jQuery UI、CSS变换在动画⽅⾯的最佳组合。Velocity.js 在内部实现中使⽤了jQuery的jQuery.queue()⽅法，因此它⽐ jQuery的jQuery.animate()、jQuery.fade()、jQuery.delay()⽅法更加流畅，其性能也⾼于CSS的animation属性。
所有的效果在⼩型终端都⽆法实现展⽰，例如⼿机和智能⼿表。所以最好在web上⾯来展⽰他的功能，但是对于⼩型终端我们也做了相应的适配，以便于浏览。
要点
velocity.js是jQuery的动画插件，具有更快更⾼效的动画切换效果
2014年5⽉3⽇，julian在其GitHub上发布了velocity.js
velocity.js是⼀款⼩⽽强⼤的插件
-
下⾯我们来研究它的具体实现⽅法
为了应⽤动画和滚动效果，我们必须得在标签中进⾏data-hijacking和data-animation⾃定义的设置来实现这⼀功能
<body data-hijacking="off" data-animation="scaleDown">
以上代码的意思是启动动画效果data-animation为按⽐例缩减scaleDown，data-animation⼀共定义了
7种不同的动画效果，分别为scaleDown,rotate,fixed,gallery,parallax,opacity,catch.我们可以根据⾃⼰的需求，进⾏任意⼀种效果的应⽤。并且我将⽰例代码做了7个页⾯来分别呈现它的效果。设置数据拦截属性data-hijacking为关闭，你也可以设置为on，来展⽰它的效果。以上两个属性均来⾃velocity.js
html中Dom结构
在这个结构中我们想展⽰5个不同的⼀组页⾯，我们把他分为五个 section ，同时定义了2个⽤来进⾏切换作⽤的图标按钮
<body data-hijacking="off" data-animation="scaleDown">
<section class="cd-section visible">
<div><h2>页⾯滚动切换效果1</h2></div>
</section>
js控制滚动条
<section class="cd-section"><div>
<h2>页⾯滚动切换效果2</h2></div>
</section>
<section class="cd-section">
<div><h2>页⾯滚动切换效果3</h2></div>
</section>
<section class="cd-section">
<div><h2>页⾯滚动切换效果4</h2></div>
</section>
<section class="cd-section">
<div><h2>页⾯滚动切换效果5</h2></div>
</section>
<nav>
<ul class="cd-vertical-nav">
<li><a href="#0" class="cd-prev inactive">Next</a></li>
<li><a href="#0" class="cd-next">Prev</a></li>
</ul>
</nav> <!-- .cd-vertical-nav -->
</body>
css样式添加
通过对每个 section 进⾏样式的设计，⽅便我们查看和交互，⼤家可以根据需求在做⼀些相应样式。
.cd-section:first-of-type > div {
background-color: #2b334f;
}
.
cd-section:nth-of-type(2) > div {
background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
background-color: #f06a59;
}
js事件处理
当我们设定了数据拦截属性data-hijacking为关闭后，所有动画效果均按照它窗⼝的相对位置进⾏原⽐例缩放。当触发了动画事件之后，我们会对当前窗⼝页⾯的样式包括缩放⽐例由⼩到⼤，或者由⼤到⼩。以及相关透明度变化讲解。
下⾯详细展开对以下代码的讲解。⾸先windowHeight是指你设备窗⼝的本⾝⾼度是⼀个固定值，jQuery(window).scrollTop()是页⾯中滚动条的⾼度，是⼀个范围值从上往下滑动时（0～所有页⾯⾼度），从下往上滑动的时候是从（所有页⾯⾼度～0）。actualBlock.offset().top是⼀组固定值，代表每⼀个 section 页⾯到顶部的距离分别是（0，每张页⾯⾼度，每张页⾯⾼度＊2，每张页⾯⾼度＊3。。。）每张页⾯⾼度依据设备⽽定。弄明⽩了这些代码的意思过后，我们可以看到下⾯的判断语句当offset值⼤于负的窗⼝⾼度时，即从下往上滑动时，当前页⾯由⼤到⼩切换，并且透明度不改变，y轴的值不断的增加，页⾯逐渐退出当前视图窗⼝。当offset值⼩于窗⼝⾼度时，即从上往下滑动时，当前页⾯由⼩到⼤切换，并且透明度逐渐透明，y轴的值为零，进⾏缩放。阴影模糊半径改变。
//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
windowHeight = $(window).height();
if( offset >= -windowHeight && offset <= 0 ) {
// section entering the viewport
translateY = (-offset)*100/windowHeight;
scale = 1;
opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
//section leaving the viewport
scale = (1 - ( offset * 0.3/windowHeight));
opacity = ( 1 - ( offset/windowHeight) );
translateY = 0;
boxShadowBlur = 40*(offset/windowHeight);
}
以上事件处理之后，还有两个点击事件，点击那两个切换按钮，进⾏页⾯直接切换，同时还有velocity.js的事件处理函数例如对动画效果 translateUp,translateDown,scaleDown等做的⼀些效果。
$.Velocity
.RegisterEffect("scaleDown", {
defaultDuration: 800,
calls: [
[ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
]
});
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。