summaryrefslogtreecommitdiffstats
path: root/kanebros/kanebros-logo_try5.html
diff options
context:
space:
mode:
Diffstat (limited to 'kanebros/kanebros-logo_try5.html')
-rw-r--r--kanebros/kanebros-logo_try5.html90
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>