feat: [#89] logo animation when scrolling

Author: cd-bash

src/components/logo/index.ts

@@ -1,6 +1,8 @@
 import './styles.css';
 import LOGO from './assets/cd-labs-logo.png';
 
+// --------------------------------------------------------------------------------
+
 export function buildMainLogo() {
     const logoContainer = document.createElement('div');
     const logoImg = document.createElement('img');
@@ -17,4 +19,17 @@ export function buildMainLogo() {
     logoContainer.appendChild(logoText);
 
     return logoContainer;
+}
+
+// --------------------------------------------------------------------------------
+
+export function changeLogoOnScroll() {
+    const logoContainer = document.querySelector('.main-logo') as HTMLElement;
+    if (!logoContainer) return;
+
+    if (window.scrollY > 50) {
+        logoContainer.classList.add('scrolled');
+    } else {
+        logoContainer.classList.remove('scrolled');
+    }
 }

src/components/logo/styles.css

@@ -1,13 +1,18 @@
-
 .main-logo {
     position: fixed;
     top: 40px;
     left: 55px;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
     img {
         width: 95px;
         height: 95px;
         image-rendering: pixelated;
+        transition: width 0.3s, height 0.3s;
+    }
+
+    img:hover {
+        animation: rotate 0.5s steps(4) infinite;
     }
 
     p {
@@ -17,5 +22,24 @@
         font-family: "Handjet", sans-serif;
         font-size: 2em;
         font-weight: 900;
+        transition: opacity 0.3s;
     }
-}
+}
+
+.main-logo.scrolled img {
+    width: 60px;
+    height: 60px;
+}
+
+.main-logo.scrolled p {
+    opacity: 0;
+    pointer-events: none;
+}
+
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+

src/index.ts

@@ -1,4 +1,4 @@
-import { buildMainLogo } from "./components/logo";
+import {buildMainLogo, changeLogoOnScroll} from "./components/logo";
 import { router } from "./core/router";
 import {homeView, buildViewBase, renderView} from "./views";
 import {buildTopNav} from "./components/top-nav";
@@ -20,6 +20,8 @@ function init() {
 
     body.appendChild(mainLogo);
     body.appendChild(nav);
+    window.addEventListener('scroll', changeLogoOnScroll);
+
     body.appendChild(contentPage);