i wondering if possible create fill animation using css or javascript?
basically want create fill animation 1 shown in image bellow:
http://i40.tinypic.com/eit6ia.png
the red being fill , black being empty.
this code jeff posted images doesn't work reason! missing something??
<!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>untitled document</title> <style type="text/css"> #black{ position:absolute; z-index:2; color:black; font-weight:bold; font-size:2em; width:768px; } #red { position:absolute; z-index:10; left:8px; width:0px; overflow:hidden; font-weight:bold; font-size:2em; color:red; } </style> <script language="javascript"> var red = document.getelementbyid('red'); red.style.width = "0px"; red.style.height = "1024px"; var animation = setinterval(function(){ if(parseint(red.style.width,10) == 768) clearinterval(animation); red.style.width = parseint(red.style.width,10)+2 +"px"; },10); </script> </head> <body> <div><img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg"/><img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg"/></div> </body> </html>
here way in pure javascript. had fun css styling.
live demo(with text)
live demo (with images)
image animation
html
<div> <img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg" /> <img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg" /> </div> css
#black { /* added position , z-index ensure images overlay correctly */ position:absolute; z-index:2; /* styling fun */ color:black; font-weight:bold; font-size:2em; /* default width */ width:768px; } #red { /* position , z-index let overlay #black , #red elements*/ position:absolute; z-index:10; /* put element directly on #black element (compensating margin/padding of #black element */ left:8px; /* make initial width 0px , hide overflow. */ width:0px; overflow:hidden; /* fun styling */ font-weight:bold; font-size:2em; color:red; } javascript
var red = document.getelementbyid('red'); red.style.width = "0px"; /* set height image not "scale" */ red.style.height = "1024px"; var animation = setinterval(function () { if (parseint(red.style.width, 10) == 768) clearinterval(animation); red.style.width = parseint(red.style.width, 10) + 2 + "px"; }, 10); text animation
html
<div> <span id="black">logo</span> <span id="red">logo</span> </div> css
#black{ /* fun styling */ color:black; font-weight:bold; font-size:2em; } #red { /* position , z-index lets overlay #black , #red elements*/ position:absolute; z-index:10; /* put element directly on #black element (compensating margin/padding of #black element */ left:8px; /* make initial width 0px , hide overflow. */ width:0px; overflow:hidden; /* fun styling */ font-weight:bold; font-size:2em; color:red; } javascript
/* on window load (when page loaded) */ window.onload = function(){ /* select our #red element */ var red = document.getelementbyid('red'); /* set width of #red 0px */ red.style.width = "0px"; /* create action execute every 50ms */ var animation = setinterval(function(){ /* if element @ desired width, clear animation loop */ if(red.style.width == "91px") clearinterval(animation); /* otherwise, set width+=1, ensuring numeric value of */ red.style.width = parseint(red.style.width,10)+1 +"px"; },50); }; jquery alternative
$('#red').css('width','0px'); $('#red').animate({'width':'91px'},4500); javascript vs jquery
after unofficial test battery, jquery animation purpose ran 85% slower pure javascript counterpart. huge performance difference.
Comments
Post a Comment