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

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

页面滚动切换效果

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

浏览器支持

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

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

所有的特效应用都是通过velocity.js。Velocity.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上面来展示他的功能,但是对于小型终端我们也做了相应的适配,以便于浏览

要点

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

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

  1. <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个用来进行切换作用的图标按钮

  1. <body data-hijacking="off" data-animation="scaleDown">
  2. <section class="cd-section visible">
  3. <div><h2>页面滚动切换效果1</h2></div>
  4. </section>
  5. <section class="cd-section"><div>
  6. <h2>页面滚动切换效果2</h2></div>
  7. </section>
  8. <section class="cd-section">
  9. <div><h2>页面滚动切换效果3</h2></div>
  10. </section>
  11. <section class="cd-section">
  12. <div><h2>页面滚动切换效果4</h2></div>
  13. </section>
  14. <section class="cd-section">
  15. <div><h2>页面滚动切换效果5</h2></div>
  16. </section>
  17. <nav>
  18. <ul class="cd-vertical-nav">
  19. <li><a href="#0" class="cd-prev inactive">Next</a></li>
  20. <li><a href="#0" class="cd-next">Prev</a></li>
  21. </ul>
  22. </nav> <!-- .cd-vertical-nav -->
  23. </body>

css样式添加

通过对每个<section>进行样式的设计,方便我们查看和交互,大家可以根据需求在做一些相应样式。

  1. .cd-section:first-of-type > div {
  2. background-color: #2b334f;
  3. }
  4. .cd-section:nth-of-type(2) > div {
  5. background-color: #2e5367;
  6. }
  7. .cd-section:nth-of-type(3) > div {
  8. background-color: #267481;
  9. }
  10. .cd-section:nth-of-type(4) > div {
  11. background-color: #fcb052;
  12. }
  13. .cd-section:nth-of-type(5) > div {
  14. background-color: #f06a59;
  15. }

事件处理

当我们设定了数据拦截属性data-hijacking为关闭后,所有动画效果均按照它窗口的相对位置进行原比例缩放。当触发了动画事件之后,我们会对当前窗口页面的样式包括缩放比例由小到大,或者由大到小。以及相关透明度变化讲解。

下面详细展开对以下代码的讲解。首先windowHeight是指你设备窗口的本身高度是一个固定值,$(window).scrollTop()是页面中滚动条的高度,是一个范围值从上往下滑动时(0~所有页面高度),从下往上滑动的时候是从(所有页面高度~0)。actualBlock.offset().top是一组固定值,代表每一个<section>页面到顶部的距离分别是(0,每张页面高度,每张页面高度*2,每张页面高度*3。。。)每张页面高度依据设备而定。弄明白了这些代码的意思过后,我们可以看到下面的判断语句当offset值大于负的窗口高度时,即从下往上滑动时,当前页面由大到小切换,并且透明度不改变,y轴的值不断的增加,页面逐渐退出当前视图窗口。当offset值小于窗口高度时,即从上往下滑动时,当前页面由小到大切换,并且透明度逐渐透明,y轴的值为零,进行缩放。阴影模糊半径改变。

  1. //actualBlock is the section we are animation
  2. var offset = $(window).scrollTop() - actualBlock.offset().top,
  3. windowHeight = $(window).height();
  4. if( offset >= -windowHeight && offset <= 0 ) {
  5. // section entering the viewport
  6. translateY = (-offset)*100/windowHeight;
  7. scale = 1;
  8. opacity = 1;
  9. } else if( offset > 0 && offset <= windowHeight ) {
  10. //section leaving the viewport
  11. scale = (1 - ( offset * 0.3/windowHeight));
  12. opacity = ( 1 - ( offset/windowHeight) );
  13. translateY = 0;
  14. boxShadowBlur = 40*(offset/windowHeight);
  15. }

以上事件处理之后,还有两个点击事件,点击那两个切换按钮,进行页面直接切换,同时还有velocity.js的事件处理函数例如对动画效果 translateUp,translateDown,scaleDown等做的一些效果。

  1. $.Velocity
  2. .RegisterEffect("scaleDown", {
  3. defaultDuration: 800,
  4. calls: [
  5. [ { opacity: ‘0‘, scale: ‘0.7‘, boxShadowBlur: ‘40px‘ }, 1]
  6. ]
  7. });

结束语

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

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

时间: 2024-10-29 19:10:50

velocity.js实现页面滚动切换效果的相关文章

js实现图片自动切换效果。

js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval(test, 2000); var array = new Array(); var index = 0; var array = new Array("../../Content/images/3s1hj_kqzew4k2ozbhs2dwgfjeg5sckzsew_780x520.jpg"

js整频滚动展示效果(函数节流鼠标滚轮事件)

<!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> <meta http-equiv="Content-T

从零开始学习H5应用(1)——V1.0版,简单页面滑动切换效果

可曾看见过那些在微信上转疯了的H5神作?好生羡慕啊,那么从今天开始,我将从零开始学习制作H5应用,看看那么漂亮的页面是怎么样一步一步形成的. 准备 在学习制作H5应用之前,必须具备以下基础前提: HTML,CSS,JS基本编写与制作能力 了解了H5中的各种新特性 有一定的逻辑思维能力,可以将复杂任务通过分析简化为若干原子事件来处理 看得懂汉语,以及教程中出现的前端术语. 任务 这是本系列的第一篇,任务非常简单, 制作一个具有3张页面,每次只显示其中一张页面,当手指向上滑动设备屏幕时当前页面消失下

JS框架_(JQuery.js)图片相册掀开切换效果

图片掀开切换效果: <!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> <meta http-equiv=&quo

原生js禁止页面滚动

// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处理程序中不生效. }, // 开启滚动 open() { document.body.removeEventListener('touchmove', this.e, false); }, // 禁止滚动 close() { document.body.addEventListener('touch

JS实现页面回到顶部效果

[代码] 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>home</title> 6 </head> 7 <style> 8 *{ 9 padding:0; 10 margin:0; 11 } 12 .box{ 13 width:1190px; /*只有设置了

WOW.js – 让页面滚动更有趣

官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+  Chrome  Firefox  Opera  Safari  IE6.IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果:而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错.为了达到更好的兼容,最好加一个浏览器及版本判断. 1.wow.js依赖于animate.cs

js禁止页面滚动

开发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面.如何实现呢,往下看 js实现整个页面禁止滚动: document.body.addEventListener('touchmove', function(e){ e.preventDefault(); }, { passive: false }); //passive 参数不能省略,用来兼容ios和android passive是干吗用的呢,设置该属性的目的主要是为了在阻止事件默认行为导致的卡顿.等待监听器的执

图片 滚动切换效果(三)

网格布阵功能完成.这样,可以拖动网格 也 可以 切屏,他们之间 仅仅是  长按 区分. Vector3 v1 = DragPoint - FingerDownPoint + FingerUpPoint + hitsOnLongPressVector - Grid.transform.position; v1.z = -1; hitsOnLongPress.collider.transform.position = v1; RaycastHit2D[] hitsOnDrag = Physics2D