今天来看个好玩的东西,一个有果冻效果的导航栏:

    果冻效果的导航栏

    主要思路

    这个主要是在移动框的前面和后面加了一个可变大小的椭圆:

    这样还看不出来,当加上颜色之后,我们可以发现如下:

    两边圆的颜色是互斥的,左边圆背景为黑色(导航栏背景也为黑色,因此看不到左边的圆,因此左边看上去像少了一块),右边的圆背景为红色(因为方块的颜色也是红色,因此右边看上去像方块多了一块)。

    大致搞懂了一个的话,我们看看一个完整的变化过程:

    其实主要的就是左右两个圆的大小和颜色变化,使我们产生一种这样的错觉,代码上我们主要用jquery的queue来实现一个动画队列,这样是为了方便可以自定义动画的时间,例如,如果两个距离比较远,那么抖动的幅度更大,时间稍长一点,关键代码如下:

    1. var LeftMoveRightEnd= function(distance) {
    2.     var _d=Math.sqrt((distance/80)>>0);
    3.     if(_d<1){
    4.         _d=1;
    5.     }
    6.     var func = [
    7.         function(next) {$('.jelly_move_after').animate({'width': '0px','right': '0px'}, Math.min(100,_d*100), function() {next();})},
    8.         function(next) {$('.jelly_move_after').css({'background': 'red'});next();},
    9.         function(next) {$('.jelly_move_after').animate({'width': _d*5+'px','right': -1*_d*2+'px'}, Math.min(100,_d*100)*3/4, function() {next();})},
    10.         function(next) {$('.jelly_move_after').animate({'width': '0px','right': '0px'}, Math.min(100,_d*100)*3/4, function() {})},
    11.     ];
    12.     return func;
    13. }

    DEMO下载

    点击下载[0积分]一共下载0
    回到顶部
    我要评论

    所有评论

      相关文章