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

时间:2021-11-29 15:47:02

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/jQuery动画应用示例及源码

在线演示        源码下载

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/jQuery动画应用示例及源码

在线演示        源码下载

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/jQuery动画应用示例及源码

在线演示        源码下载

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/jQuery动画应用示例及源码

在线演示        源码下载

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

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

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

在线演示        源码下载

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

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

在线演示        源码下载