Bg pattern on body animate

10 years ago · 88ed78f493
3 changed files with 97 additions and 39 deletions
--- a/server/files/javascript/semantic.js
+++ b/server/files/javascript/semantic.js
@ -551,29 +551,6 @@ semantic.ready = function() {
      }
    },

-    menu: {
-      mouseenter: function() {
-        $(this)
-          .stop()
-          .animate({
-            width: '135px'
-          }, 300, function() {
-            $(this).find('.text').show();
-          })
-        ;
-      },
-      mouseleave: function(event) {
-        $(this).find('.text').hide();
-        $(this)
-          .stop()
-          .animate({
-            width: '60px'
-          }, 300)
-        ;
-    }
-
-    },
-
    peek: function() {
      var
        $body     = $('html, body'),
@ -742,10 +719,6 @@ semantic.ready = function() {
    handler.makeCode();
  }

-  $sidebarButton
-    .on('mouseenter', handler.menu.mouseenter)
-    .on('mouseleave', handler.menu.mouseleave)
-  ;
  $menu
    .sidebar({
      animation: 'scale down'
--- a/server/files/stylesheets/semantic.css
+++ b/server/files/stylesheets/semantic.css
@ -256,6 +256,12 @@ a:hover {
     Pushed
 ---------------*/

+#example.hide .attached.launch.button,
+#example.show .attached.launch.button {
+  transition: none !important;
+  pointer-events: none !important;
+}
+
 /*--------------
     Intro
 ---------------*/
@ -295,6 +301,45 @@ body.guide .main.container > * {
 #example .masthead .ui.tag.label:after {
  background-color: #000000 !important;
 }
+body#example {
+  position: absolute;
+  background: #191919 url(../images/icons.png) !important;
+
+  -moz-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+
+  -webkit-animation-name: masthead;
+  -moz-animation-name: masthead;
+  -o-animation-name: masthead;
+  animation-name: masthead;
+
+  opacity: 1;
+
+  -webkit-animation-duration: 30s;
+  -moz-animation-duration: 30s;
+  -ms-animation-duration: 30s;
+  -o-animation-duration: 30s;
+  animation-duration: 30s;
+
+  -webkit-animation-fill-mode: both;
+  -moz-animation-fill-mode: both;
+  -ms-animation-fill-mode: both;
+  -o-animation-fill-mode: both;
+  animation-fill-mode: both;
+
+  animation-timing-function: linear;
+  -webkit-animation-timing-function: linear;
+
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  -ms-animation-iteration-count: infinite;
+  -o-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+
+  transform: rotateZ(0deg);
+}
 #example .masthead:before {
  position: absolute;
  z-index: 1;
@ -558,18 +603,62 @@ body.guide .main.container > * {
 #example .stripe .message {
  margin: 2em 0em;
 }
-
+#example .attached.launch.button {
+  position: fixed;
+  top: 63px;
+  left: 0px;
+  z-index: 500;
+  width: 55px;
+  height: 50px;
+  overflow: hidden;
+  -webkit-transition:
+    0.3s width ease
+  ;
+  -moz-transition:
+    0.3s width ease
+  ;
+  -o-transition:
+    0.3s width ease
+  ;
+  -ms-transition:
+    0.3s width ease
+  ;
+  transition:
+    0.3s width ease
+  ;
+}
+#example .attached.launch.button .text {
+  position: absolute;
+  top: 15px;
+  left: 54px;
+  opacity: 0;
+  -webkit-transition:
+    0.3s opacity 0.3s
+  ;
+  -moz-transition:
+    0.3s opacity 0.3s
+  ;
+  -o-transition:
+    0.3s opacity 0.3s
+  ;
+  -ms-transition:
+    0.3s opacity 0.3s
+  ;
+  transition:
+    0.3s opacity 0.3s
+  ;
+}
+#example .attached.launch.button:hover {
+  width: 130px;
+}
+#example .attached.launch.button:hover .text {
+  opacity: 1;
+}

 #example .shortcuts {
  float: right;
  clear: both;
 }
-#example .launch.button {
-  position: fixed;
-  top: 63px;
-  z-index: 500;
-  width: 60px;
-}
 #example .launch.button .icon {
  margin-left: 0px;
 }
@ -582,10 +671,6 @@ body.guide .main.container > * {
 #example.index .attached.launch.button {
  top: 96px;
 }
-#example .launch.button .text {
-  display: inline-block;
-  display: none;
-}

 #example .main.container {
  position: relative;
--- a/server/layouts/default.html.eco
+++ b/server/layouts/default.html.eco
@ -147,7 +147,7 @@

  </script>
 </head>
-<body id="example" class="<%= @document.css %>" ontouchstart="">
+<body id="example" class="pushable <%= @document.css %>" ontouchstart="">
  <div class="ui vertical inverted labeled icon sidebar menu" id="menu">
    <a class="hide item">
      <i class="close icon"></i> Close Menu