diff options
author | Kyle K <kylek389@gmail.com> | 2013-07-15 20:49:30 -0500 |
---|---|---|
committer | Kyle K <kylek389@gmail.com> | 2013-07-15 20:49:30 -0500 |
commit | 8e1978c79d0628d1bfee0d3e02cfa19c21ff9dac (patch) | |
tree | 929d67c034a48a48577454262f5063520f509c7b /kanebros/kanebros-logo_try2.xhtml | |
parent | e6956acf7d09cc2353134f16e4ac33bd3cb71e5a (diff) | |
download | websandbox-8e1978c79d0628d1bfee0d3e02cfa19c21ff9dac.tar.gz websandbox-8e1978c79d0628d1bfee0d3e02cfa19c21ff9dac.tar.bz2 websandbox-8e1978c79d0628d1bfee0d3e02cfa19c21ff9dac.zip |
weather of 2 locations and temp difference
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> |