Lots of fancy animations

- Tilt
- Parallax
- Animated Text

src/components/CallToAction.astro

@@ -3,7 +3,7 @@ const { text, url_gh, url_mr, url_cf, url_wiki = "", mod = "default" } = Astro.p
 import { Icon } from 'astro-icon/components'
 ---
 
-<div class="container">
+<div class="container rellax" data-rellax-speed="-1.5">
   <div class={"call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl p-12 md:p-24 " + mod}>
     <h2 class="text-center text-3xl md:text-5xl">{text}</h2>
     <div class="flex flex-col gap-3 min-[800px]:flex-row">

src/components/ContentMedia.astro

@@ -7,11 +7,11 @@ const { imgSrc, reverseImg = false } = Astro.props
 <section class="my-32">
   <div class="container">
     <div class="grid grid-cols-1 gap-24 md:grid-cols-2">
-      {!reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}
+      {!reverseImg ? <Media class="rounded-lg rellax -z-10" data-rellax-desktop-speed="-1" data-rellax-speed="-0.5" src={imgSrc} /> : ''}
       <div class="space-content flex flex-col justify-center">
         <slot />
       </div>
-      {reverseImg ? <Media class="rounded-lg" src={imgSrc} /> : ''}
+      {reverseImg ? <Media class="rounded-lg rellax -z-10" data-rellax-desktop-speed="1" data-rellax-speed="0.5" src={imgSrc} /> : ''}
     </div>
   </div>
-</section>
+</section>

src/components/Header.astro

@@ -4,7 +4,8 @@ import { SkipLinks } from 'accessible-astro-components'
 import { Icon } from 'astro-icon/components'
 ---
 
-<header class="sticky top-0 z-50 backdrop-blur-md">
+<div class="mb-24"></div>
+<header class="fixed w-full top-0 z-50 backdrop-blur-md">
   <SkipLinks />
   <Navigation>
     <li class="menu-item">

src/components/Hero.astro

@@ -7,9 +7,11 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
 <section class="hero my-12">
   <div class="container">
     <div class="grid grid-cols-1 items-center gap-24 lg:grid-cols-2">
-      <div class="flex flex-col items-center gap-8 md:items-start">
+      <div class="flex flex-col items-center gap-8 md:items-start rellax -z-10" data-rellax-desktop-speed="-5" data-rellax-speed="-4">
         <h1 class="text-center text-6xl md:text-left lg:text-8xl">
-          <slot><span class="text-gradient drop-shadow-xl">Modding</span> done with passion</slot>
+          <slot>
+            <span id="modding-text" class="text-gradient">Modding</span> 
+            <p>done with passion</p></slot>
         </h1>
         <div class="flex flex-col gap-3 min-[500px]:flex-row">
           <a class="button has-icon" href="https://github.com/Motschen">
@@ -23,11 +25,64 @@ const { src = '/motschensummer-cutout.png' } = Astro.props
           </a>
         </div>
       </div>
-      <img class="hidden lg:block" src={src} alt="" decoding="async" />
+      <div class="rellax -z-10" data-rellax-speed="-7">
+        <img class="hidden lg:block" src={src} alt="" decoding="async" data-tilt data-tilt-full-page-listening />
+      </div>
     </div>
   </div>
 </section>
 
+<script>
+  import VanillaTilt from 'vanilla-tilt'
+  
+  function initTilt() {
+    VanillaTilt.init(document.querySelectorAll('[data-tilt]'), {
+      max: 25,
+      speed: 400,
+    })
+  }
+
+  function replaceModdingText() {
+    const moddingText = document.getElementById('modding-text');
+    let textIndex = 0;
+
+    function textLoop() {
+      if (!moddingText || !moddingText.textContent) return;
+      const texts = ['Community', 'Design', 'Coding', 'Modding'];
+      replaceText(texts[textIndex]);
+      textIndex = (textIndex + 1) % texts.length;
+    }
+    function replaceText(replacementText) {
+      if (!moddingText || !moddingText.textContent) return;
+      const delay = 90;
+
+      moddingText.textContent += "|";
+      let lastTimeout = (moddingText.textContent.length - 1) * delay;
+      for (let i = 0; i < moddingText.textContent.length; i++) {
+        setTimeout(() => {
+          moddingText.textContent = moddingText.textContent.slice(0, -2)+'|';
+        }, i*delay);
+      }
+      for (let i = 0; i < replacementText.length+2; i++) {
+        setTimeout(() => {
+          moddingText.textContent = replacementText.substring(0, i);
+          if (i < replacementText.length+1) moddingText.textContent += '|';
+        }, lastTimeout + i*delay);
+      }
+
+    }
+    if (moddingText) setInterval(textLoop, 5000);
+  }
+  
+  initTilt();
+  replaceModdingText();
+
+  document.addEventListener('astro:after-swap', () => {
+    initTilt();
+    replaceModdingText();
+  })
+</script>
+
 <style>
   .text-gradient {
     background: linear-gradient(315deg, var(--secondary-300) 25%, var(--primary-300));

src/components/ImageComparison.astro

@@ -48,7 +48,6 @@ import { Icon } from 'astro-icon/components'
         const buttons = this.querySelectorAll('.right-half');
 
         buttons.forEach((button) => {
-            console.log(button);
             dragElement(button);
         });
 

src/layouts/DefaultLayout.astro

@@ -70,7 +70,6 @@ const {
       // sticky footer on low content pages
       html,
       body {
-        height: 100%;
         overflow-x: hidden;
       }
 
@@ -110,3 +109,17 @@ const {
     </style>
   </body>
 </html>
+<script>
+  import Rellax from 'rellax';
+
+  function initRellax() {
+    var rellax = new Rellax('.rellax', {
+      center: true
+    });
+  }
+  initRellax();
+  document.addEventListener('astro:after-swap', () => {
+    initRellax();
+  })
+  
+</script>