1 files changed, 75 insertions, 0 deletions
diff --git a/kanebros/kanebros-logo_try3.xhtml b/kanebros/kanebros-logo_try3.xhtml
new file mode 100644
index 0000000..0d0d13c
--- /dev/null
+++ b/kanebros/kanebros-logo_try3.xhtml
@@ -0,0 +1,75 @@
+<!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 {
+    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 type="text/javascript">
+<![CDATA[
+    $(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
+                        })
+                    }
+                }})
+            }
+
+            });
+        });
+    });
+]]>
+</script>
+</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 />
+</body>
+</html>