经典炫酷的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);
    })();

View Code

在线演示        源码下载

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() ;
})();

View Code

在线演示        源码下载

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"));

});

View Code

在线演示        源码下载

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();
});

View Code

在线演示        源码下载

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);

View Code

在线演示        源码下载

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:0;
  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:0;
  opacity:1;
}
#second:checked ~ div.two {
  left:0;
  opacity:1;
}
#third:checked ~ div.three {
  left:0;
  opacity:1;
}

View Code

在线演示        源码下载