Merge pull request #8 from mlutcss/feat/animated-logo

mr150 · web-flow · commit 876329816d8b · 2025-12-07T00:05:02.000+03:00
Animate logo in the header
diff --git a/src/_includes/header/header.ejs b/src/_includes/header/header.ejs
@@ -13,7 +13,7 @@
 	<%# Logo %>
 
 	<div class="W40p md_W25p md_Flg0.25">
-		<a href="/#hero-page" class="Mxw35u md_Mxw25u D">
+		<a href="/#hero-page" id="header-logo" class="Mxw35u md_Mxw25u D <%= it.cssHeaderLogoVisibility %> Ts-O;$shortTs">
 			<img class="D P1u;2u W70p sm_W85p md_W100p" alt="mlut logo" src="/assets/img/logo.png">
 		</a>
 	</div>
diff --git a/src/arts.ejs b/src/arts.ejs
@@ -1,6 +1,6 @@
 ---
 layout: 'base.ejs'
-title: Arts
+area: Arts
 ---
 <%
 	const artsPageCSS = {
diff --git a/src/assets/script/toggleLogo.js b/src/assets/script/toggleLogo.js
@@ -0,0 +1,29 @@
+const hero = document.querySelector('#hero-page');
+const logo = document.querySelector('#header-logo');
+
+function handleIntersect(entries, observer){
+	entries.forEach(entry => {
+		if (!entry.isIntersecting){
+			logo.style.visibility = "visible";
+			logo.style.opacity = 1;
+		} else {
+			logo.style.opacity = 0;
+			setTimeout(() => {
+				logo.style.visibility = "hidden";
+			}, 200);
+		};
+	});
+};
+
+function createObserver(){
+	const options = {
+		root: null,
+		threshold: "0.15",
+		rootMargin: "0px",
+	};
+
+	const observer = new IntersectionObserver(handleIntersect, options);
+	observer.observe(hero);
+};
+
+createObserver();
diff --git a/src/index.ejs b/src/index.ejs
@@ -1,5 +1,6 @@
 ---
 layout: 'base.ejs'
+area: 'main'
 ---
 <%
 	const sectionHeader = "Txa-c M0;0;5u Fns7u C-$accent900"
diff --git a/src/layouts/base.ejs b/src/layouts/base.ejs
@@ -1,3 +1,11 @@
+<%
+let cssHeaderLogoVisibility = "Vs-v O1"
+if (it.area === "main"){
+	cssHeaderLogoVisibility = "Vs-h O0"
+}
+
+%>
+
 <!DOCTYPE html>
 <html lang="en"
   class="
@@ -14,8 +22,9 @@
   <title>mlut - make CSS exciting again!</title>
 </head>
 <body class="D-f Fld-c Jc-sb Fnf-sans-serif Bgc-$core950">
-
-  <%- include('../_includes/header/header.ejs') %>
+  <%- include('../_includes/header/header.ejs',{
+		cssHeaderLogoVisibility: cssHeaderLogoVisibility
+	}) %>
   <main >
     <%- it.content %>
   </main>
@@ -24,5 +33,6 @@
 
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>
 	<script>hljs.highlightAll();</script>
+	<script src="../assets/script/toggleLogo.js" type="module"></script>
 </body>
 </html>
