经典炫酷的HTML5/jQuery动画应用示例及源码

jQuery是一款普遍受前端开发者欢迎的Javascript框架，但是开发者貌似更关注jQuery开发的插件，海量的jQuery插件让前端开发者非常方便。HTML5的加入让jQuery这个家族更加丰富多彩，因为利用HTML5，我们可以制作更加绚丽动感的动画特效，HTML5结合jQuery，真是我们开发者的福利啊。本文分享了一些经典炫酷的HTML5/jQuery动画应用，喜欢的朋友可以分享和收藏。

jquery视差滑块幻灯特效

很传统的一款jQuery焦点图插件，但是该焦点图插件是宽屏的，整体看起来非常大气。

核心jQuery代码：

    var oImgBox = getByClass(document.body,'pxs_slider_wrapper')[0];

    var oImg = getByClass(document.body,'pxs_slider')[0];

    var aLi = oImg.getElementsByTagName('li');

    var aImg = oImg.getElementsByTagName('img');

    //各种背景

    var bg1 = getByClass(document.body,'pxs_bg1')[0];

    var bg2 = getByClass(document.body,'pxs_bg2')[0];

    var bg3 = getByClass(document.body,'pxs_bg3')[0];

    var oPrev = getByClass(document.body,'pxs_next')[0];

    var oNext = getByClass(document.body,'pxs_prev')[0];

    var oImg_sm = getByClass(document.body,'pxs_thumbnails')[0];

    var aImg_li = oImg_sm.getElementsByTagName('li');

    var aImg_sm = oImg_sm.getElementsByTagName('img');

    var iNow = 0;

    oImg.style.width = aLi.length * document.documentElement.clientWidth + 'px';

    for(var i=0; i<aLi.length;i++)

    {

        aLi[i].style.width = document.documentElement.clientWidth + 'px';

    }

    oPrev.style.left = document.documentElement.clientWidth /2 + aImg[0].offsetWidth /2  - oPrev.offsetWidth - 14 + 'px';

    oNext.style.left = document.documentElement.clientWidth /2 - aImg[0].offsetWidth /2  + oPrev.offsetWidth - 15 + 'px';

    oImg_sm.style.width = aImg[0].offsetWidth + 'px';

    oImg_sm.style.marginLeft = - aImg[0].offsetWidth/2 + 'px'

    for(var i=0;i<aImg_sm.length;i++)

    {

        aImg_li[i].index = i;

        var ran = Math.random() * 40 - 20;

        var cliWidth = (oImg_sm.offsetWidth - aImg_li[0].offsetWidth*aImg_li.length)/(aImg_li.length+1);

        aImg_li[i].style.left = cliWidth + i*(cliWidth+aImg_li[i].offsetWidth) + 'px';

        setStyle3(aImg_li[i],'transform','rotate(' + ran + 'deg)')

        aImg_li[i].onmouseover = function()

        {

            iNow = this.index;

            startMove(aImg_sm[this.index], {opacity:100,marginTop:-20});

        }

        aImg_li[i].onmouseout = function()

        {

            startMove(aImg_sm[this.index], {opacity:70,marginTop:0});

        }

        aImg_li[i].onclick = function()

        {

            if(iNow == 0)

            {

                bg3.style.left = 0;

                bg2.style.left = 0;

                bg1.style.left = 0;

            }

            startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});

            startMove(bg3, {left:parseInt(bg3.offsetLeft - document.documentElement.clientWidth/2)});

            startMove(bg2, {left:parseInt(bg2.offsetLeft - document.documentElement.clientWidth/4)});

            startMove(bg1, {left:parseInt(bg1.offsetLeft - document.documentElement.clientWidth/8)});

        }

        oPrev.onclick = function()

        {

            if(iNow == aImg_li.length-1)

            {

                iNow = -1;

                bg3.style.left = 0;

                bg2.style.left = 0;

                bg1.style.left = 0;

                startMove(aImg_sm[aImg_li.length-1], {opacity:70,marginTop:0});

            }

            iNow++

            startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});

            startMove(bg3, {left:parseInt(bg3.offsetLeft - document.documentElement.clientWidth/2)});

            startMove(bg2, {left:parseInt(bg2.offsetLeft - document.documentElement.clientWidth/4)});

            startMove(bg1, {left:parseInt(bg1.offsetLeft - document.documentElement.clientWidth/8)});

            for(var i=0;i<aImg_sm.length;i++)

            {

                startMove(aImg_sm[i], {opacity:70,marginTop:0});

            }

            startMove(aImg_sm[iNow], {opacity:100,marginTop:-20});

        }

        oNext.onclick = function()

        {

            if(iNow == 0)

            {

                iNow = aImg_li.length;

                bg3.style.left = -bg3.offsetWidth + document.documentElement.clientWidth + 'px';

                bg2.style.left = -bg2.offsetWidth + document.documentElement.clientWidth + 'px';

                bg1.style.left = -bg1.offsetWidth + document.documentElement.clientWidth + 'px';

                startMove(aImg_sm[0], {opacity:70,marginTop:0});

            }

            iNow--

            startMove(oImg, {left:-(iNow) * document.documentElement.clientWidth});

            startMove(bg3, {left:parseInt(bg3.offsetLeft + document.documentElement.clientWidth/2)});

            startMove(bg2, {left:parseInt(bg2.offsetLeft + document.documentElement.clientWidth/4)});

            startMove(bg1, {left:parseInt(bg1.offsetLeft + document.documentElement.clientWidth/8)});

            for(var i=0;i<aImg_sm.length;i++)

            {

                startMove(aImg_sm[i], {opacity:70,marginTop:0});

            }

            startMove(aImg_sm[iNow], {opacity:100,marginTop:-20});

        }

    }

    (function (){

        var oS=document.createElement('script');

        oS.type='text/javascript';

        oS.src='http://sc.chinaz.com';

        document.body.appendChild(oS);

    })();

在线演示源码下载

HTML5像素文字爆炸重组动画特效

这又是一款基于HTML5 Canvas的文字动画特效，文字可以打散成像素点，然后开始重组的动画过程。

核心jQuery代码：

(function(){

    var stage, textStage, form, input;

    var circles, textPixels, textFormed;

    var offsetX, offsetY, text;

    var colors = ['#B2949D', '#FFF578', '#FF5F8D', '#37A9CC', '#188EB2'];

    function init() {

        initStages();

        initForm();

        initText();

        initCircles();

        animate();

        addListeners();

    }

    // Init Canvas

    function initStages() {

        offsetX = (window.innerWidth-600)/2;

        offsetY = (window.innerHeight-300)/2;

        textStage = new createjs.Stage("text");

        textStage.canvas.width = 600;

        textStage.canvas.height = 200;

        stage = new createjs.Stage("stage");

        stage.canvas.width = window.innerWidth;

        stage.canvas.height = window.innerHeight;

    }

    function initForm() {

        form = document.getElementById('form');

        form.style.top = offsetY+200+'px';

        form.style.left = offsetX+'px';

        input = document.getElementById('inputText');

    }

    function initText() {

        text = new createjs.Text("t", "80px 'Source Sans Pro'", "#eee");

        text.textAlign = 'center';

        text.x = 300;

    }

    function initCircles() {

        circles = [];

        for(var i=0; i<600; i++) {

            var circle = new createjs.Shape();

            var r = 7;

            var x = window.innerWidth*Math.random();

            var y = window.innerHeight*Math.random();

            var color = colors[Math.floor(i%colors.length)];

            var alpha = 0.2 + Math.random()*0.5;

            circle.alpha = alpha;

            circle.radius = r;

            circle.graphics.beginFill(color).drawCircle(0, 0, r);

            circle.x = x;

            circle.y = y;

            circles.push(circle);

            stage.addChild(circle);

            circle.movement = 'float';

            tweenCircle(circle);

        }

    }

    // animating circles

    function animate() {

        stage.update();

        requestAnimationFrame(animate);

    }

    function tweenCircle(c, dir) {

        if(c.tween) c.tween.kill();

        if(dir == 'in') {

            c.tween = TweenLite.to(c, 0.4, {x: c.originX, y: c.originY, ease:Quad.easeInOut, alpha: 1, radius: 5, scaleX: 0.4, scaleY: 0.4, onComplete: function() {

                c.movement = 'jiggle';

                tweenCircle(c);

            }});

        } else if(dir == 'out') {

            c.tween = TweenLite.to(c, 0.8, {x: window.innerWidth*Math.random(), y: window.innerHeight*Math.random(), ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5, scaleX: 1, scaleY: 1, onComplete: function() {

                c.movement = 'float';

                tweenCircle(c);

            }});

        } else {

            if(c.movement == 'float') {

                c.tween = TweenLite.to(c, 5 + Math.random()*3.5, {x: c.x + -100+Math.random()*200, y: c.y + -100+Math.random()*200, ease:Quad.easeInOut, alpha: 0.2 + Math.random()*0.5,

                    onComplete: function() {

                        tweenCircle(c);

                    }});

            } else {

                c.tween = TweenLite.to(c, 0.05, {x: c.originX + Math.random()*3, y: c.originY + Math.random()*3, ease:Quad.easeInOut,

                    onComplete: function() {

                        tweenCircle(c);

                    }});

            }

        }

    }

    function formText() {

        for(var i= 0, l=textPixels.length; i<l; i++) {

            circles[i].originX = offsetX + textPixels[i].x;

            circles[i].originY = offsetY + textPixels[i].y;

            tweenCircle(circles[i], 'in');

        }

        textFormed = true;

        if(textPixels.length < circles.length) {

            for(var j = textPixels.length; j<circles.length; j++) {

                circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 0.1});

            }

        }

    }

    function explode() {

        for(var i= 0, l=textPixels.length; i<l; i++) {

            tweenCircle(circles[i], 'out');

        }

        if(textPixels.length < circles.length) {

            for(var j = textPixels.length; j<circles.length; j++) {

                circles[j].tween = TweenLite.to(circles[j], 0.4, {alpha: 1});

            }

        }

    }

    // event handlers

    function addListeners() {

        form.addEventListener('submit', function(e) {

            e.preventDefault();

            if(textFormed) {

                explode();

                if(input.value != '') {

                    setTimeout(function() {

                        createText(input.value.toUpperCase());

                    }, 810);

                } else {

                    textFormed = false;

                }

            } else {

                createText(input.value.toUpperCase());

            }

        });

    }

    function createText(t) {

        var fontSize = 860/(t.length);

        if (fontSize > 160) fontSize = 160;

        text.text = t;

        text.font = "900 "+fontSize+"px 'Source Sans Pro'";

        text.textAlign = 'center';

        text.x = 300;

        text.y = (172-fontSize)/2;

        textStage.addChild(text);

        textStage.update();

        var ctx = document.getElementById('text').getContext('2d');

        var pix = ctx.getImageData(0,0,600,200).data;

        textPixels = [];

        for (var i = pix.length; i >= 0; i -= 4) {

            if (pix[i] != 0) {

                var x = (i / 4) % 600;

                var y = Math.floor(Math.floor(i/600)/4);

                if((x && x%8 == 0) && (y && y%8 == 0)) textPixels.push({x: x, y: y});

            }

        }

        formText();

    }

    init() ;

})();

在线演示源码下载

HTML5仿Chrome样式控制滑杆动画

很可爱的HTML5控制滑杆应用，不但色彩艳丽，而且动画效果更酷。

核心jQuery代码：

$( document ).ready(function() {

  function createHoverState (myobject){

    myobject.hover(function() {

      $(this).prev().toggleClass('hilite');

    });

    myobject.mousedown(function() {

      $(this).prev().addClass('dragging');

      $("*").mouseup(function() {

        $(myobject).prev().removeClass('dragging');

      });

    });

  }

  $(".slider").slider({

    orientation: "horizontal",

    range: "min",

    max: 100,

    value: 0,

    animate: 1300

  });

  $("#blue").slider( "value", 100 );

  $('.slider').each(function(index) {

    $(this).slider( "value", 75-index*(50/($('.slider').length-1)));

  });

  createHoverState($(".slider a.ui-slider-handle"));

});

在线演示源码下载

HTML5 SVG Tab滑块菜单非常酷的Tab菜单

我们分享过很多HTML5 Tab应用，但这款非常特别，你可以在这里获取更多HTML5资源。

核心jQuery代码：

var menuItems = $('.main-navigation li');

menuItems.on("click", function(event) {

  menuItems.removeClass("active");

  $(this).addClass("active");

  $(".main-content").css({

    "background": $(this).data("bg-color")

  });

  event.preventDefault();

});

在线演示源码下载

HTML5/CSS3超酷焦点图特效带前后翻页按钮

这又是一款焦点图应用，不过利用了CSS3技术，让图片以缩放的方式切换，效果很不错。

在线演示源码下载

HTML5/CSS3自定义下拉框 3D卡片折叠动画

这款HTML5下拉菜单绝对有创意，3D效果，并且下拉时有折叠动画特效。

核心jQuery代码：

(function($){

  //Author: Brady Sammons

  //URL: www.bradysammons.com

    /* -------------------------------------------------------- */

    /*    //set Global variables

    /* -------------------------------------------------------- */

    var cards = $(".card-drop"),

        toggler = cards.find(".toggle"),

        links = cards.find("ul>li>a"),

        li = links.parent('li'),

        count = links.length,

        width = links.outerWidth();

        //set z-Index of drop Items

        links.parent("li").each(function(i){

            $(this).css("z-index" , count - i); //invert the index values

        });

        //set top margins & widths of li elements

        function setClosed(){

            li.each(function(index){

                 $(this).css("top" , index *2)

                         .css("width" , width - index *2)

                         .css("margin-left" , (index*2)/2);

            });

            li.addClass('closed');

            toggler.removeClass("active");

        }

        setClosed();

    /* -------------------------------------------------------- */

    /*    Toggler Click handler

    /* -------------------------------------------------------- */

    toggler.on("mousedown" , function(){

        var $this = $(this); //cache $(this)

        //if the menu is active:

        if($this.is(".active")){

            setClosed();

        }else{

            //if the menu is un-active:

            $this.addClass("active");

            li.removeClass('closed');

            //set top margins

            li.each(function(index){

                 $(this).css("top" , 60 * (index + 1))

                         .css("width" , "100%")

                         .css("margin-left" , "0px");

            });

        }

    });

    /* -------------------------------------------------------- */

    /*    Links Click handler

    /* -------------------------------------------------------- */

    links.on("click" , function(e){

        var $this = $(this),

            label = $this.data("label");

            icon = $this.children("i").attr("class");

            li.removeClass('active');

        if($this.parent("li").is("active")){

            $this.parent('li').removeClass("active");

        }else{

            $this.parent("li").addClass("active");

        }

        toggler.children("span").text(label);

        toggler.children("i").removeClass().addClass(icon);

        setClosed();

        e.preventDefault;

    });

})(jQuery);

在线演示源码下载

HTML5/CSS3淡入淡出滑块焦点图非常清新

HTML5滑块应用，淡入淡出的动画效果。

核心CSS代码：

#second:checked ~ .two blockquote {

  background-color:purple;

}

.two blockquote:after{

  border: solid transparent;

  border-top-color: purple;

  border-left-color:purple;

  border-width: 10px;

}

#third:checked ~ .three blockquote{

  background-color:#54885F;

}

.three blockquote:after{

  border: solid transparent;

  border-top-color: #54885F;

  border-left-color: #54885F;

  border-width: 10px;

}

.quotes{

  position:absolute;

  color:rgba(255,255,255,0.5);

  font-size:5em;

}

.leftq{

  top:-25px;

  left:5px;

}

.rightq{

  bottom:-10px;

  right:5px;

}

img{

  float:left;

  margin-right: 20px;

}

.slide{

  position:absolute;

  left:-100%;

  opacity:;

  transition: all 0.6s ease-in;

}

#first:checked ~ label.first {

  border-width:6px;

  border-color:#DB532B;

}

#second:checked ~ label.second {

  border-width:6px; border-color:purple;

}

#third:checked ~ label.third {

  border:6px solid #54885F;

}

#first:checked ~ div.one {

  left:;

  opacity:;

}

#second:checked ~ div.two {

  left:;

  opacity:;

}

#third:checked ~ div.three {

  left:;

  opacity:;

}

在线演示源码下载