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

果冻效果的导航栏

主要思路

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

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

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

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

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

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

DEMO下载

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

所有评论

返回
邮箱:
绑定
取消
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

邮箱:
绑定邮箱后,若有回复,会邮件通知。
提交
还可以输入500个字