effetti tamarri sul logo

themes/maya0x17/static/effects.css

@@ -0,0 +1,79 @@
+/* pulse {{{ */
+.pulse {
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
+  animation: pulse 5s infinite;
+}
+.pulse:hover {
+  animation: none;
+}
+
+@-webkit-keyframes pulse {
+  0% {
+    -webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  67% {
+    -webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  70% {
+      -webkit-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
+  }
+  73% {
+    -webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  76% {
+      -webkit-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
+  }
+  79% {
+    -webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  100% {
+      -webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+}
+@keyframes pulse {
+  0% {
+    -moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+    box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  67% {
+    -moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+    box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  70% {
+      -moz-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
+      box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
+  }
+  73% {
+    -moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+    box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  76% {
+      -moz-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
+      box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
+  }
+  79% {
+    -moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+    box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+  100% {
+      -moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+      box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
+  }
+}
+/* pulse }}} */
+
+/* rotate {{{ */
+.rotate {
+    animation: rotation 1s infinite ease-out;
+}
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(1440deg);
+  }
+}
+/* rotate }}} */

themes/maya0x17/static/ruotalogo.js

@@ -1,23 +1,19 @@
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('start!')
     var logo = document.getElementById('logo-img')
+    logo.classList.add('rotate')
     function ruotaLogo() {
         logo.style.transform = 'rotate(' + -window.pageYOffset/2+'deg)'
     }
     function scrollSetup() {
         "use strict";
-        let last_known_scroll_position = 0;
+        var last_known_scroll_position = 0
-        let ticking = false;
+        var ticking = false
 
-        function doSomething(scroll_pos) {
+        window.addEventListener('scroll', function (e) {
-            // Do something with the scroll position
+            last_known_scroll_position = window.scrollY
-        }
-
-        window.addEventListener('scroll', function(e) {
-            last_known_scroll_position = window.scrollY;
 
             if (!ticking) {
-                window.requestAnimationFrame(function() {
+                window.requestAnimationFrame(function () {
 
                     ruotaLogo()
                     ticking = false;
@@ -25,13 +21,16 @@ document.addEventListener('DOMContentLoaded', function() {
 
                 ticking = true;
             }
-        });
+        })
     }
-    ruotaLogo()
+    setTimeout(function () {
-    scrollSetup()
+        logo.classList.remove('rotate')
-    logo.addEventListener('click', function() {
+        //ruotaLogo()
+        scrollSetup()
+    }, 1000)
+    logo.addEventListener('click', function () {
         var menu = document.querySelector('#menu-row')
-        if (window.getComputedStyle(menu).display == 'none') {
+        if (window.getComputedStyle(menu).display === 'none') {
             menu.style.display = 'block'
             // menu.scrollIntoView()
         } else {

themes/maya0x17/templates/base.html

@@ -7,6 +7,7 @@
         <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/normalize.css" />
         <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/skeleton.css" />
         <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/theme.css" />
+        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/effects.css" />
 
         {% if FAVICON %}
             <link href="{{ SITEURL }}/{{ FAVICON }}" rel="icon">
@@ -21,7 +22,7 @@
     </head>
     <body>
         <div id="logo-div">
-            <img id="logo-img" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png" style="width: 15vw" />
+            <img id="logo-img" class="pulse" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png" style="width: 15vw" />
         </div>
         <div id="all-wrapper">
             <div class="row" id="header-row">