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

 更新时间:2021年10月09日 17:08:00   作者:虫虫教父  
这篇文章主要介绍了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]
        ]
    });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript实现反转字符串的方法详解

    JavaScript实现反转字符串的方法详解

    这篇文章主要介绍了JavaScript实现反转字符串的方法,结合实例形式分析了字符串反转操作,并详细讲述了相关函数的功能与使用注意事项,需要的朋友可以参考下
    2017-04-04
  • js多个物体运动功能实例分析

    js多个物体运动功能实例分析

    这篇文章主要介绍了js多个物体运动功能,结合实例形式分析了js实现多物体运动功能的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • 对于防止按钮重复点击的尝试详解

    对于防止按钮重复点击的尝试详解

    这篇文章主要介绍了对于防止按钮重复点击的尝试,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 微信小程序wxs实现吸顶效果

    微信小程序wxs实现吸顶效果

    这篇文章主要为大家详细介绍了微信小程序wxs实现吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js 两个日期比较相差多少天的实例

    js 两个日期比较相差多少天的实例

    下面小编就为大家带来一篇js 两个日期比较相差多少天的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 解决layer 动态加载select 失效的问题

    解决layer 动态加载select 失效的问题

    今天小编就为大家分享一篇解决layer 动态加载select 失效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript 浏览器事件小结

    Javascript 浏览器事件小结

    Javascript中的事件都是与对象相关联的,而不是语言本身所有,当Javascript在浏览器中运行的时候,事件与每个浏览器实现的DOM模型有关。
    2010-02-02
  • 微信小程序canvas实现刮刮乐效果

    微信小程序canvas实现刮刮乐效果

    这篇文章主要为大家详细介绍了微信小程序canvas实现刮刮乐效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • JavaScript 通过模式匹配实现重载

    JavaScript 通过模式匹配实现重载

    昨天rank同学向我提出一个问题,在实际应用中有些接口需要提供类似于函数重载的功能,以方便开发者组织代码逻辑,简化使用者调用。
    2010-08-08
  • 记录几个javascript有关的小细节

    记录几个javascript有关的小细节

    记录几个javascript有关的小细节...
    2007-04-04

最新评论