zoukankan      html  css  js  c++  java

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

    页面滚动切换效果

    今天介绍一个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 UI、CSS变换 在动画方面的最佳组合。Velocity.js在内部实现中使用了jQuery的$.queue()方法，因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅，其性能也高于CSS的animation属性

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

    要点

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

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

    为了应用动画和滚动效果，我们必须得在<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();
    5. if( offset >= -windowHeight && offset <= 0 ) {
    6. // section entering the viewport
    7. translateY = (-offset)*100/windowHeight;
    8. scale = 1;
    9. opacity = 1;
    10. } else if( offset > 0 && offset <= windowHeight ) {
    11. //section leaving the viewport
    12. scale = (1 - ( offset * 0.3/windowHeight));
    13. opacity = ( 1 - ( offset/windowHeight) );
    14. translateY = 0;
    15. boxShadowBlur = 40*(offset/windowHeight);
    16. }

     以上事件处理之后，还有两个点击事件，点击那两个切换按钮，进行页面直接切换，同时还有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
  • 相关阅读:
    牛客小白月赛2 D 虚虚实实 【欧拉图】【连通图】
    牛客小白月赛2 A 数字方阵【随机】【找规律】
    牛客小白月赛1 J おみやげをまらいました 【MAP】
    牛客小白月赛1 I あなたの蛙が帰っています 【卡特兰数】
    欧拉函数
    乘法逆元
    扩展欧几里得
    快速乘法
    JPEG图像压缩出现资源不足问题的解决
    如何避免关键程序被意外关闭？
  • 原文地址：https://www.cnblogs.com/gbtags/p/4642753.html
Copyright © 2011-2022 走看看