enable 3d effect

nukehub-dev · Jan 9, 2025 · 9b419d0 · 9b419d0
1 parent 12d4bbb
commit 9b419d0
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 74 deletions.
diff --git a/_includes/svg.html b/_includes/svg.html
@@ -1,48 +1,106 @@
 <svg
-class="{{ include.class }}"
-   viewBox="0.00 0.00 1024.00 1024.00"
-   version="1.1"
-   id="svg236"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
+  class="{{ include.class }}"
+  viewBox="0.00 0.00 1024.00 1024.00"
+  version="1.1"
+  id="svg236"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:svg="http://www.w3.org/2000/svg"
+>
   <g
-     id="g10485"
-     transform="matrix(3.1345855,0,0,3.1681526,-1119.1055,-1093.7635)">
-    <path class="nukehub-logo-circle-light"
-       d="m 385.12,463.48 c -4.44,13.5 -25.32,10.98 -24.58,-4.84 q 0.44,-9.43 4.73,-20.45 c 16.22,-41.66 43.4,-67.32 82.87,-86.81 6.57,-3.23 16,-4.4 21.9,0.25 5.87,4.63 5.15,14.67 0.11,19.81 q -2.01,2.05 -7.97,4.65 c -31.59,13.76 -60.02,40.66 -72.02,72.97 q -2.65,7.16 -5.04,14.42 z"
-       id="path8881"
-       />
-    <path class="nukehub-logo-circle-light"
-       d="m 580.69,375.81 c -8.55,-5.25 -6.46,-18.71 1.13,-23.07 6.21,-3.57 12.23,-1.85 18.21,1.5 36.82,20.65 69.97,55.47 81.05,96.48 1.62,5.99 0.63,13.94 -4.29,18.16 -6.47,5.53 -16.75,4.78 -20.87,-3.61 q -1.25,-2.54 -4.15,-11.45 c -9.63,-29.5 -29.11,-51.99 -55.74,-68.53 q -7.66,-4.75 -15.34,-9.48 z"
-       id="path8883"
-       />
-    <path class="nukehub-logo-circle"
-       d="m 451.17,494.48 c -14.33,-0.17 -28.77,-0.93 -43.06,-0.06 q -0.49,0.03 -0.45,-0.46 c 1.7,-19.31 7.65,-39.22 19.23,-54.92 12.16,-16.48 28.66,-31.06 47.76,-38.88 q 16.05,-6.58 33.29,-9.43 0.51,-0.08 0.5,0.43 l -0.29,44.63 a 0.67,0.67 0 0 1 -0.65,0.66 q -3.51,0.14 -6.78,1.21 c -26.17,8.65 -44.06,28.88 -48.96,56.32 q -0.09,0.5 -0.59,0.5 z"
-       id="path8885"
-       />
-    <path class="nukehub-logo-circle"
-       d="m 532.87,436.7 a 0.53,0.53 0 0 1 -0.42,-0.53 l 0.17,-44.11 q 0.01,-0.48 0.49,-0.44 38.83,3.68 66.19,31.05 10.82,10.83 19.09,23.67 c 9.72,15.09 12.84,30.4 14.66,48.33 q 0.06,0.55 -0.49,0.51 -22.65,-1.59 -45.33,-0.63 -0.53,0.02 -0.62,-0.5 c -1.97,-11.27 -5.31,-22.23 -12.18,-31.28 Q 559.21,442.74 532.87,436.7 Z"
-       id="path8887"
-       />
-    <path class="nukehub-logo-circle-light"
-       d="m 486.45,544.05 c -29.77,-27.76 -18.47,-74.32 19.6,-86.26 15.79,-4.95 34.04,-0.2 46.42,10.55 19.84,17.25 21.61,44.46 7.24,66.3 -16.4,24.94 -51.06,30.11 -73.26,9.41 z m 39.37,-44.52 a 17.6,17.6 0 0 0 -17.6,-17.6 17.6,17.6 0 0 0 -17.6,17.6 17.6,17.6 0 0 0 17.6,17.6 17.6,17.6 0 0 0 17.6,-17.6 z"
-       id="path8889"
-       />
-    <path class="nukehub-logo-circle"
-       d="m 633.48,518.74 a 0.37,0.37 0 0 1 0.35,0.4 c -4.98,56.3 -45.11,97.31 -100.96,104.1 q -0.28,0.03 -0.28,-0.26 l -0.12,-45.12 a 0.7,0.7 0 0 1 0.53,-0.68 c 28.34,-7.07 48.76,-28.83 52.71,-57.94 a 0.58,0.57 2.3 0 1 0.55,-0.5 q 23.61,-1.07 47.22,0 z"
-       id="path8893"
-       />
-    <path class="nukehub-logo-circle"
-       d="m 486.73,617.78 c -43.89,-14.64 -74.82,-51.87 -78.6,-98.46 q -0.04,-0.48 0.44,-0.49 18.71,-0.38 37.43,-0.34 2.66,0 5.29,0.35 0.49,0.07 0.53,0.55 c 2.95,28.92 29.37,51.88 56,58.18 q 0.38,0.09 0.39,0.49 l 0.33,44.69 q 0,0.46 -0.45,0.36 -14.33,-2.99 -21.36,-5.33 z"
-       id="path8895"
-       />
-    <path class="nukehub-logo-circle-light"
-       d="m 443.36,660.71 c -35.69,-19.39 -67.56,-50.9 -81.31,-89.23 -1.72,-4.8 -3.6,-10.45 -2.27,-15.38 q 2.48,-9.17 11.91,-10.16 c 7.83,-0.82 12,3.87 14.26,10.85 q 4.39,13.56 14.66,28.92 c 16.87,25.23 38.11,40.65 64.92,54.16 15.45,7.78 8.04,27.95 -7.79,25.88 q -6.73,-0.89 -14.38,-5.04 z"
-       id="path8897"
-       />
-    <path class="nukehub-logo-circle-light"
-       d="m 587.87,665.74 c -5.5,-0.8 -11.2,-4.91 -12.2,-10.7 -1.66,-9.57 2.87,-13.24 10.96,-17.83 30.8,-17.47 56.29,-41.82 66.53,-76.66 q 2.2,-7.46 3.79,-9.5 c 3.35,-4.27 8.78,-5.73 14.1,-4.55 14.04,3.14 10.56,17.53 6.89,27.99 -13.54,38.63 -40.24,65.15 -74.67,86.01 -4.92,2.97 -9.83,6.06 -15.4,5.24 z"
-       id="path8899"
-       />
+    id="g10485"
+    transform="matrix(3.1345855,0,0,3.1681526,-1119.1055,-1093.7635)"
+  >
+    <path
+      class="nukehub-logo-circle-light"
+      d="m 486.45,544.05 c -29.77,-27.76 -18.47,-74.32 19.6,-86.26 15.79,-4.95 34.04,-0.2 46.42,10.55 19.84,17.25 21.61,44.46 7.24,66.3 -16.4,24.94 -51.06,30.11 -73.26,9.41 z m 39.37,-44.52 a 17.6,17.6 0 0 0 -17.6,-17.6 17.6,17.6 0 0 0 -17.6,17.6 17.6,17.6 0 0 0 17.6,17.6 17.6,17.6 0 0 0 17.6,-17.6 z"
+      id="path8889"
+    />
+    <path
+      class="nukehub-logo-circle"
+      d="m 451.17,494.48 c -14.33,-0.17 -28.77,-0.93 -43.06,-0.06 q -0.49,0.03 -0.45,-0.46 c 1.7,-19.31 7.65,-39.22 19.23,-54.92 12.16,-16.48 28.66,-31.06 47.76,-38.88 q 16.05,-6.58 33.29,-9.43 0.51,-0.08 0.5,0.43 l -0.29,44.63 a 0.67,0.67 0 0 1 -0.65,0.66 q -3.51,0.14 -6.78,1.21 c -26.17,8.65 -44.06,28.88 -48.96,56.32 q -0.09,0.5 -0.59,0.5 z"
+      id="path8885"
+    />
+    <path
+      class="nukehub-logo-circle-light"
+      d="m 385.12,463.48 c -4.44,13.5 -25.32,10.98 -24.58,-4.84 q 0.44,-9.43 4.73,-20.45 c 16.22,-41.66 43.4,-67.32 82.87,-86.81 6.57,-3.23 16,-4.4 21.9,0.25 5.87,4.63 5.15,14.67 0.11,19.81 q -2.01,2.05 -7.97,4.65 c -31.59,13.76 -60.02,40.66 -72.02,72.97 q -2.65,7.16 -5.04,14.42 z"
+      id="path8881"
+    />
+    <path
+      class="nukehub-logo-circle"
+      d="m 532.87,436.7 a 0.53,0.53 0 0 1 -0.42,-0.53 l 0.17,-44.11 q 0.01,-0.48 0.49,-0.44 38.83,3.68 66.19,31.05 10.82,10.83 19.09,23.67 c 9.72,15.09 12.84,30.4 14.66,48.33 q 0.06,0.55 -0.49,0.51 -22.65,-1.59 -45.33,-0.63 -0.53,0.02 -0.62,-0.5 c -1.97,-11.27 -5.31,-22.23 -12.18,-31.28 Q 559.21,442.74 532.87,436.7 Z"
+      id="path8887"
+    />
+    <path
+      class="nukehub-logo-circle-light"
+      d="m 580.69,375.81 c -8.55,-5.25 -6.46,-18.71 1.13,-23.07 6.21,-3.57 12.23,-1.85 18.21,1.5 36.82,20.65 69.97,55.47 81.05,96.48 1.62,5.99 0.63,13.94 -4.29,18.16 -6.47,5.53 -16.75,4.78 -20.87,-3.61 q -1.25,-2.54 -4.15,-11.45 c -9.63,-29.5 -29.11,-51.99 -55.74,-68.53 q -7.66,-4.75 -15.34,-9.48 z"
+      id="path8883"
+    />
+    <path
+      class="nukehub-logo-circle"
+      d="m 633.48,518.74 a 0.37,0.37 0 0 1 0.35,0.4 c -4.98,56.3 -45.11,97.31 -100.96,104.1 q -0.28,0.03 -0.28,-0.26 l -0.12,-45.12 a 0.7,0.7 0 0 1 0.53,-0.68 c 28.34,-7.07 48.76,-28.83 52.71,-57.94 a 0.58,0.57 2.3 0 1 0.55,-0.5 q 23.61,-1.07 47.22,0 z"
+      id="path8893"
+    />
+    <path
+      class="nukehub-logo-circle-light"
+      d="m 587.87,665.74 c -5.5,-0.8 -11.2,-4.91 -12.2,-10.7 -1.66,-9.57 2.87,-13.24 10.96,-17.83 30.8,-17.47 56.29,-41.82 66.53,-76.66 q 2.2,-7.46 3.79,-9.5 c 3.35,-4.27 8.78,-5.73 14.1,-4.55 14.04,3.14 10.56,17.53 6.89,27.99 -13.54,38.63 -40.24,65.15 -74.67,86.01 -4.92,2.97 -9.83,6.06 -15.4,5.24 z"
+      id="path8899"
+    />
+    <path
+      class="nukehub-logo-circle"
+      d="m 486.73,617.78 c -43.89,-14.64 -74.82,-51.87 -78.6,-98.46 q -0.04,-0.48 0.44,-0.49 18.71,-0.38 37.43,-0.34 2.66,0 5.29,0.35 0.49,0.07 0.53,0.55 c 2.95,28.92 29.37,51.88 56,58.18 q 0.38,0.09 0.39,0.49 l 0.33,44.69 q 0,0.46 -0.45,0.36 -14.33,-2.99 -21.36,-5.33 z"
+      id="path8895"
+    />
+    <path
+      class="nukehub-logo-circle-light"
+      d="m 443.36,660.71 c -35.69,-19.39 -67.56,-50.9 -81.31,-89.23 -1.72,-4.8 -3.6,-10.45 -2.27,-15.38 q 2.48,-9.17 11.91,-10.16 c 7.83,-0.82 12,3.87 14.26,10.85 q 4.39,13.56 14.66,28.92 c 16.87,25.23 38.11,40.65 64.92,54.16 15.45,7.78 8.04,27.95 -7.79,25.88 q -6.73,-0.89 -14.38,-5.04 z"
+      id="path8897"
+    />
   </g>
 </svg>
+
+<script>
+$('.{{ include.class }}').each(function() {
+  const $logo = $(this);
+
+  $logo.on('mousemove', function(e) {
+    const { left, top, width, height } = $logo[0].getBoundingClientRect();
+    const x = e.clientX - left; // Mouse X position within the element
+    const y = e.clientY - top;  // Mouse Y position within the element
+
+    const rotateX = ((y / height) - 0.5) * 60;
+    const rotateY = ((x / width) - 0.5) * -60;
+
+    // Adjust shadow offset based on the logo's rotation
+    const shadowOffsetX = rotateY / 10; // Horizontal shadow offset based on X rotation
+    const shadowOffsetY = rotateX / 10; // Vertical shadow offset based on Y rotation
+
+    // Apply shadow only on the back side of the logo
+    $logo.find('path').each(function() {
+      const $path = $(this);
+
+      // Apply shadow to each path based on the rotation direction
+      $path.css('filter', `drop-shadow(${shadowOffsetX}px ${shadowOffsetY}px 4px rgba(0, 0, 0, 0.25))`);
+    });
+
+    // Rotate the entire logo
+    $logo.css('transform', `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`);
+  });
+
+  $logo.on('mouseleave', function() {
+    $logo.find('path').each(function() {
+      const $path = $(this);
+
+      $path.css('filter', 'none'); // Remove shadow from each path
+      $path.css('transition', 'filter 0.5s ease'); // Smooth shadow transition on exit for each path
+    });
+
+    // Reset rotation for the entire logo
+    $logo.css('transform', 'rotateX(0) rotateY(0)');
+    $logo.css('transition', 'transform 0.5s ease'); // Smooth rotation exit
+  });
+
+  $logo.on('mouseenter', function() {
+    $logo.css('transition', 'transform 0.1s ease'); // Smooth entry for the logo
+  });
+});
+</script>
diff --git a/css/nukehub.css b/css/nukehub.css
@@ -290,47 +290,74 @@ ul {
 .loading_image {
   width: 30%;
   max-height: 30%;
-  fill: var(--svg-fill);
+  overflow: visible;
   justify-self: center;
-  animation: loading 1.5s;
-  animation-iteration-count: infinite;
 }
-@keyframes loading {
+
+@keyframes fadeInStay {
   0% {
-    opacity: 0;
-  }
-  10% {
-    opacity: 0.2;
+    opacity: 0.1;
   }
-  20% {
-    opacity: 0.4;
+  95% {
+    opacity: 1;
   }
-  30% {
-    opacity: 0.6;
+  100% {
+    opacity: 0.1;
   }
-  40% {
-    opacity: 0.8;
+}
+
+@keyframes fadeInOut {
+  0% {
+    opacity: 0;
   }
   50% {
     opacity: 1;
   }
-  60% {
-    opacity: 0.8;
-  }
-  70% {
-    opacity: 0.6;
-  }
-  80% {
-    opacity: 0.4;
-  }
-  90% {
-    opacity: 0.2;
-  }
   100% {
     opacity: 0;
   }
 }
 
+.loading_image g path {
+  opacity: 0; /* Start invisible */
+  animation: fadeInOut 3s ease-in-out infinite;
+}
+
+.loading_image g path:nth-child(1) {
+  animation: fadeInStay 3s ease-in-out infinite;
+}
+
+.loading_image g path:nth-child(2) {
+  animation-delay: 0.2s; /* Second path appears after 0.2s */
+}
+
+.loading_image g path:nth-child(3) {
+  animation-delay: 0.4s; /* Third path appears after 0.4s */
+}
+
+.loading_image g path:nth-child(4) {
+  animation-delay: 0.6s; /* Fourth path appears after 0.6s */
+}
+
+.loading_image g path:nth-child(5) {
+  animation-delay: 0.8s; /* Fifth path appears after 0.8s */
+}
+
+.loading_image g path:nth-child(6) {
+  animation-delay: 1s; /* Sixth path appears after 1s */
+}
+
+.loading_image g path:nth-child(7) {
+  animation-delay: 1.2s; /* Seventh path appears after 1.2s */
+}
+
+.loading_image g path:nth-child(8) {
+  animation-delay: 1.4s; /* Eighth path appears after 1.4s */
+}
+.loading_image g path:nth-child(9) {
+  animation-delay: 1.6s; /* Eighth path appears after 1.6s */
+}
+
 /* TODO: LAYOUT */
 
 .container {
@@ -1404,6 +1431,7 @@ button {
   color: var(--color-alt);
 }
 .nukehub-logo {
+  perspective: 1000px;
   fill: var(--svg-fill);
   overflow: visible;
   zoom: calc(1 / var(--zoom-scale));
@@ -1414,9 +1442,6 @@ button {
 .nukehub-logo-circle {
   fill: var(--color-alt);
 }
-.nukehub-logo:hover {
-  animation: shake 0.5s;
-}
 .nukehub-logo:active {
   animation: shake 0.5s;
   animation-iteration-count: infinite;