diff options
Diffstat (limited to 'kanebros/kanebros-logo_try5.html')
-rw-r--r-- | kanebros/kanebros-logo_try5.html | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/kanebros/kanebros-logo_try5.html b/kanebros/kanebros-logo_try5.html new file mode 100644 index 0000000..741d6c1 --- /dev/null +++ b/kanebros/kanebros-logo_try5.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> +<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 { + position: relative; + width: 120px; + height: 55px; + //border: 1px solid white; + margin: 10px +} +#tear_top, #tear_bottom { + position: absolute; /* halves must overlap */ + width: 54; + height: 35px; + margin: 0; + //border: 1px solid red; +} +#tear_bottom { + margin-top: 20px; + right: 0px; /* anchor the right of the div */ +} +#tear_logo { + opacity: 0.0; + margin-left: 32px; +} +</style> +<script type="text/javascript" src="jquery-1.10.1.min.js"></script> +<script type="text/javascript" src="jQueryRotateCompressed.2.2.js"></script> +<script src="jquery.zweatherfeed.min.js" type="text/javascript"></script> +<script type="text/javascript"> + + $(function() { + $("#tear_top").animate({'margin-left': 32}, 500, function() { + $(this).animate({opacity: 0.0}, 100); + }); + $("#tear_bottom").animate({'margin-right': 32}, 500, function() { + $(this).animate({opacity: 0.0}, 100); + $("#tear_logo").css({opacity: 100}); + $("#tear_logo").rotate({angle: 0, animateTo: 90, easing: $.easing.easeInOutExpo, + duration: 800, callback: function() { + $("#tear_logo").rotate({bind: { + click: function(){ + $(this).rotate({ + angle: 0, + animateTo: 270, + easing: $.easing.easeInOutElastic + }) + } + }}) + } + + }); + }); + + /* weather code */ + $("#weather").weatherfeed(['23510849','2400737'], { unit: 'f', woeid: true}, function(e) { + var tempArr = []; + $("#weather div.weatherItem div.weatherTemp").each(function(i) { + tempArr[i] = $(this).text(); + }); + var tempDiff = parseInt(tempArr[0].substring(0, tempArr[0].length-1)) - + parseInt(tempArr[1].substring(0, tempArr[1].length-1)); + $("#diffspan").html(tempDiff); + }); + + }); + +</script> +<link href="zweatherfeed.css" rel="stylesheet" type="text/css" /> +</head> +<body> +<p>Sample text above the animated logo for testing purposes.</p> +<div id="logospace"> + <div id="tear_top" class="logoimg"><img src="kane-logo/tear-top.png" alt="" /></div> + <div id="tear_bottom" class="logoimg"><img src="kane-logo/tear-bottom.png" alt="" /></div> + <img id="tear_logo" src="kane-logo/logo.png" alt="" /> +</div> +<p>Sample text below the animated logo for testing purposes.</p> +<br /> +<h4>Result</h4> +<div id="weather"></div> +<div><p>temp difference is: <span id="diffspan"></span></p></div> +</body> +</html> |