<!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>