diff options
Diffstat (limited to 'kanebros/kanebros-logo_try2.xhtml')
| -rw-r--r-- | kanebros/kanebros-logo_try2.xhtml | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/kanebros/kanebros-logo_try2.xhtml b/kanebros/kanebros-logo_try2.xhtml new file mode 100644 index 0000000..f5a6c39 --- /dev/null +++ b/kanebros/kanebros-logo_try2.xhtml @@ -0,0 +1,73 @@ +<!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> +<title>Logo Animation</title> +<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> +<style type="text/css"> +body { + color: white; + background-color: black; +} +#logospace { + width: 429px; + height: 231px; + border: 2px solid white; + margin: 10px +} +#logo { + position: relative; + border: 1px solid red; +} +#ltear, #rtear { + height: 151px; + position: absolute; /* halves must overlap */ + border: 2px solid white; +} +#logo img { +} +#rtear { + margin-top: 80px; + margin-left: 200px; +} +</style> +<script type="text/javascript" src="jquery-1.10.1.min.js"></script> +<script type="text/javascript"> +<![CDATA[ + $(function() { + $("#rtear").animate({'margin-left': 100}, 1000); + $("#ltear").animate({'margin-left': 100}, 1000, function() { + $("#logo").each(function() { + $(this).css({ + 'transform-origin': '24% 1% 0', + '-webkit-transform': 'rotate(90deg)', + '-moz-transform': 'rotate(90deg)', + '-ms-transform': 'rotate(90deg)', + '-o-transform': 'rotate(90deg)', + 'transform': 'rotate(90deg)', + 'zoom': 1 + }); + }); + }); + }); +]]> +</script> +</head> +<body> +<br /> +<br /> +<br /> +<br /><br /> +<br /> +<br /> +<br /> +<p>Sample text above the animated logo.</p> +<div id="logospace"> +<div id="logo"> + <div id="ltear" class="logoimg"><img src="kane-logo/ltear.png" alt="" /></div> + <div id="rtear" class="logoimg"><img src="kane-logo/rtear.png" alt="" /></div> +</div> +</div> +<p>Sample text below the animated logo.</p> +</body> +</html> |