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