$(element).animate({"gradient":{top:[r,g,b],bottom:[r,g,b]}});
Requirements:
jquery-cssHooks to use linear-gradient() without setting specific css rules for every browser
Example:
click to change gradient
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="gradients.js" type="text/javascript"></script>
<script src="animate-gradient.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#element").click(function(){
$(this).animate({"gradient":{top:[Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255)],bottom:[Math.floor(Math.random() * 255),Math.floor(Math.random() * 255),Math.floor(Math.random() * 255)]}},3000);
});
});
</script>
</head>
<body>
<div id="element">
gradient
</div>
</body>
</html>
animate-gradients.js
$.fx.step['gradient']=function(fx){
if(!fx.start){
var g=fx.end,gradient=$(fx.elem).css("background-image").replace(/(-o|-webkit|-moz|linear|radial|from|\bto\b|gradient|top|left|bottom|right|\d*%)/g,'');
var color=$.grep(gradient.match(/(rgb\([^\)]+\)|#[a-z\d]*|[a-z]*)/g),function (s) { return $.trim( s )});
fx.start={top:$.map(color[0].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);}),bottom:$.map(color[1].replace(/(rgb\(|\))/g,'').split(","),function(n){return parseInt(n);})};
fx._gradient={top:$.map(g.top,function(n,i){return n-fx.start.top[i]}),bottom:$.map(g.bottom,function(n,i){return n-fx.start.bottom[i]})};
}
var rgb1=$.map(fx._gradient.top,function(n,i){return Math.floor(n*fx.pos)+fx.start.top[i]});
var rgb2=$.map(fx._gradient.bottom,function(n,i){return Math.floor(n*fx.pos)+fx.start.bottom[i]});
$(fx.elem).css({"background-image":"linear-gradient(rgb("+rgb1+") 0%, rgb("+rgb2+") 100%)"});
}
style.css
#backgroundanim{
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* Opera */
background-image: -o-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #000000), color-stop(1, #aaaaaa));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #000000 0%, #aaaaaa 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #000000 0%, #aaaaaa 100%);
width:500px;
height:600px;
display:block;
position:absolute;
}
0 Comments
Publicar un comentario