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

浏览数：24 / 时间：2015年06月09日

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