Lots of fancy animations

- Tilt
- Parallax
- Animated Text

package-lock.json

@@ -10,7 +10,10 @@
       "dependencies": {
         "@astrojs/alpinejs": "^0.4.1",
         "@types/alpinejs": "^3.13.10",
-        "alpinejs": "^3.14.1"
+        "@types/rellax": "^1.7.7",
+        "alpinejs": "^3.14.1",
+        "rellax": "^1.12.1",
+        "vanilla-tilt": "^1.8.1"
       },
       "devDependencies": {
         "@astrojs/mdx": "^4.0.3",
@@ -2384,6 +2387,12 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/rellax": {
+      "version": "1.7.7",
+      "resolved": "https://registry.npmjs.org/@types/rellax/-/rellax-1.7.7.tgz",
+      "integrity": "sha512-I/gX5eNLEh7J7CkC10EbJnleOKqza47Zt7znVefU8M2+CvtD1L5TVNesFwC9HTzDhe4Rw8+82ykzJyf5R13UTw==",
+      "license": "MIT"
+    },
     "node_modules/@types/tar": {
       "version": "6.1.13",
       "resolved": "https://registry.npmjs.org/@types/tar/-/tar-6.1.13.tgz",
@@ -10721,6 +10730,12 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/rellax": {
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/rellax/-/rellax-1.12.1.tgz",
+      "integrity": "sha512-XBIi0CDpW5FLTujYjYBn1CIbK2CJL6TsAg/w409KghP2LucjjzBjsujXDAjyBLWgsfupfUcL5WzdnIPcGfK7XA==",
+      "license": "MIT"
+    },
     "node_modules/remark-gfm": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
@@ -12549,6 +12564,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/vanilla-tilt": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.8.1.tgz",
+      "integrity": "sha512-hPB1XUsnh+SIeVSW2beb5RnuFxz4ZNgxjGD78o52F49gS4xaoLeEMh9qrQnJrnEn/vjjBI7IlxrrXmz4tGV0Kw==",
+      "license": "MIT"
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",

package.json

@@ -37,6 +37,9 @@
   "dependencies": {
     "@astrojs/alpinejs": "^0.4.1",
     "@types/alpinejs": "^3.13.10",
-    "alpinejs": "^3.14.1"
+    "@types/rellax": "^1.7.7",
+    "alpinejs": "^3.14.1",
+    "rellax": "^1.12.1",
+    "vanilla-tilt": "^1.8.1"
   }
 }

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>

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>