使用jQuery开发超酷波浪动画背景的单页面网站导航菜单

使用jQuery开发超酷带有背景波浪动画效果的单页面网站导航菜单

在线演示  本地下载

在今天的教程中,我们将使用jQuery开发一个单页面的网站,并且添加超酷的波浪动画背景效果到导航菜单上,希望大家能够喜欢!

主要开发使用插件:

  • jQuery one page nav:用来生成单页面网站典型的滚动效果
  • jQuery scrollTo.js:单页面插件依赖类库
  • jQuery background position:用来生成动画背景效果
  • jquery.animate-shadow-min.js:用来生成背景阴影效果
  • jQuery easing 1.3.js:用来添加更多生成动画效果
  • Cufon-yui.js:cufon类库,用来生成更加漂亮的字体
  • fixie.js:用来辅助自动生成网站中的文字

本篇文章最后将生成一个单页面的网站设计,并且生成漂亮的动态导航按钮,调试环境firefox和Chrome,如果你使用其它的浏览器,可能无法工作。请自己调试。

如何生成按钮的背景波浪动画特效?

在这里,我们将使用动画背景图片来生成波浪的动画效果,在之前的“使用jQuery background-position插件来创建超酷的导航条效果教程”中,我们介绍过类似的实现效果,唯一不同的是,这里我们需要循环的移动背景图片,生成类似的波浪效果,相关图片如下:

波浪

这是一个png格式的波浪图片,我们使用jQuery动态的在按钮后挪动这个图片,生成对应的波浪效果。如果你需要实现更逼真的效果,可以我们生成俩个背景层来生成叠加效果,使用不同的透明度可以生成远近波浪效果。并且我们通过插件可以添加按钮的阴影效果。

单页面导航

单页面导航效果非常简单,请参考以前的教程:分享一个超棒的jQuery的单页面滚动导航设计插件

相关代码

生成波浪效果的javascript:

function animateWave(){

    $("div.menuitem").on("mouseenter",function animationEnter(evt){

        var innerMenuWrapper = $(this).find("div.inner-menu-wrapper");
        var innerMenuWrapperInv = $(this).find("div.inner-menu-wrapper-inv");

        $(this).css({"position":"relative"});
        $(this).stop().animate({ "boxShadow" : "15px 15px 15px rgba(0,0,0,0.8)", "top":"-10px","left":"-10px"}, "fast");

        //wave animation 1
        function animation1(){

            innerMenuWrapper.animate({backgroundPosition:"-1500px -120px"},{duration:5000, easing: "easeInOutQuad", complete: function() { 

                innerMenuWrapper.animate({backgroundPosition:"0px -120px"},{duration:5000, easing: "easeInOutQuad", complete:function(){animation1();}});  

            }});

        }

        //wave animation 2
        function animation2(){

            innerMenuWrapperInv.animate({backgroundPosition:"-1500px -130px"},{duration:8000, easing: "easeInOutQuad", complete: function() { 

                innerMenuWrapperInv.animate({backgroundPosition:"-200px -130px"},{duration:8000, easing: "easeInOutQuad", complete:function(){animation2();}});  

            }});

        }

        innerMenuWrapper.animate({opacity:0.6},{queue:false, duration:400, easing: "easeInOutQuad"});
        animation1();

        innerMenuWrapperInv.animate({opacity:0.3},{queue:false, duration:400, easing: "easeInOutQuad"});
        animation2();
    });

    $("div.menuitem").on("mouseleave", function animationLeave(evt){
        var innerMenuWrapper = $(this).find("div.inner-menu-wrapper");
        var innerMenuWrapperInv = $(this).find("div.inner-menu-wrapper-inv");

        $(this).stop().animate({ "boxShadow" : "1px 1px 15px #303030", "top":"0px","left":"0px"}, "fast");

        innerMenuWrapper.stop(true).animate({opacity:0},{duration:300, easing: "easeInOutQuad", complete:function(){innerMenuWrapper.css("backgroundPosition","0px -120px");}});
        innerMenuWrapperInv.stop(true).animate({opacity:0},{duration:300, easing: "easeInOutQuad", complete:function(){innerMenuWrapperInv.css("backgroundPosition","-600px -150px");}});
    });

    $("div.menuitem").on("mousedown", function(){
        $(this).stop().animate({ "boxShadow" : "1px 1px 15px #303030", "top":"0px","left":"0px"}, "fast");
    });
}

以上代码中,我们处理导航的阴影和波浪效果,注意这里我们生成了2个背景层,分别用来展示波浪的动画效果。并且使用插件生成相关的阴影效果。

具体方法是调用了innerMenuWrapper.animate({backgroundPosition:”0px -120px”})来水平方向动画移动背景,并且在动画完成后调用callback方法complete,再次调用自己,以此生成循环的动态效果。

其它Javascript代码:

$(document).ready(function(){
    Cufon.replace('.navitem').CSS.ready(function() {
        animateWave();

        $('#nav').onePageNav({
            filter: ':not(.external)',
            scrollThreshold: 0.25
        }); 
    });
});

这里代码很简单,调用生成菜单波浪的animateWave(),并且调用Cufon-yui.js来美化相关的字体。最后生成单页面的导航效果。

代码书写完毕,希望大家喜欢这个单页面的网站模板,如果你有任何问题,请给我们留言!谢谢!

来源:使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单