首页 > 代码库 > 经典炫酷的HTML5/jQuery动画应用示例及源码

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

2121

在线演示        源码下载

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-text-pixel-effect

在线演示        源码下载

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-chrome-slider

在线演示        源码下载

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-svg-tab-slider

在线演示        源码下载

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

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

html5-css3-image-slider-nex-pre-button

在线演示        源码下载

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-dropdown-menu

在线演示        源码下载

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

html5-css3-text-slider

在线演示        源码下载