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>
<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]
]
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持猪先飞。
相关文章
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-08-20
- 最近项目不多忙，于是抽点时间巩固下切换窗口问题，感兴趣的朋友跟着小编一起学习吧...2020-06-25
- 这篇文章主要介绍了js实现文字垂直滚动和鼠标悬停效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-05
- 这篇文章主要为大家详细介绍了使用jQuery.Pin垂直滚动时固定导航的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-27
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
这篇文章主要介绍了基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-06-08- 下面小编就为大家带来一篇JS实现图片的不间断连续滚动的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-06-12
- 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title...2013-10-13
- 本文实例讲述了JS实现的N多简单无缝滚动代码。分享给大家供大家参考，具体如下：实现原理很简单，注册事件之后，立即将元素的innerHTML累加一次。接着滚动开始，当滚动条到达元素的中间位置时：不要在子元素上设置margin和paddin...2015-11-08
- 这篇文章主要为大家详细介绍了javascript实现平滑无缝滚动的具体代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-05-09
- 下面小编就为大家带来一篇javascript的列表切换【实现代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。...2016-05-05
- 这篇文章主要介绍了Vue鼠标滚轮滚动切换路由效果的实现方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-08-04
- 下面小编就为大家带来一篇JS平滑无缝滚动效果的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考...2016-05-09
- 这篇文章主要介绍了jQuery实现模仿微博下拉滚动条加载数据效果,涉及jQuery响应下拉滚动事件动态操作页面元素的技巧,需要的朋友可以参考下...2015-12-27
- 这篇文章主要介绍了Pytorch如何切换 cpu和gpu的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-01
- 这篇文章主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。...2017-01-26
- 这篇文章主要为大家详细介绍了iOS实现循环滚动公告栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-03-20
- 这篇文章主要为大家详细介绍了Javascript实现信息滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-22
- 最近要做个网页图片批量下载工具，然后需要一个页面显示网页上的所有图片供用户勾选，再根据勾选的内容来下载指定图片，其中就涉及到要到同时显示多张图片，本文就来介绍一下...2021-06-11