Hero Bild reagiert auf Mausinteraktion

niklaskothe · Dec 11, 2023 · 97db27c · 97db27c
1 parent b4033c7
commit 97db27c
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 10 deletions.
diff --git a/dist/assets/AboutView-7e180d58.js → dist/assets/AboutView-f42ad35c.js b/dist/assets/AboutView-7e180d58.js → dist/assets/AboutView-f42ad35c.js
diff --git a/dist/assets/Komponenten-a1bf328d.js → dist/assets/Komponenten-ef354b22.js b/dist/assets/Komponenten-a1bf328d.js → dist/assets/Komponenten-ef354b22.js
diff --git a/dist/assets/index-5518a5b4.js → dist/assets/index-69f833c9.js b/dist/assets/index-5518a5b4.js → dist/assets/index-69f833c9.js
diff --git a/dist/assets/index-602001f1.css → dist/assets/index-b1a773aa.css b/dist/assets/index-602001f1.css → dist/assets/index-b1a773aa.css
diff --git a/dist/index.html b/dist/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="robots" content="noindex, nofollow">
     <title>Vite App</title>
-    <script type="module" crossorigin src="/assets/index-5518a5b4.js"></script>
-    <link rel="stylesheet" href="/assets/index-602001f1.css">
+    <script type="module" crossorigin src="/assets/index-69f833c9.js"></script>
+    <link rel="stylesheet" href="/assets/index-b1a773aa.css">
   </head>
   <body>
     <div id="app"></div>

diff --git a/src/components/Hero.vue b/src/components/Hero.vue
@@ -1,3 +1,7 @@
+<script setup>
+import TiltingCard from './TiltingCard.vue';
+</script>
+
 <template>
     <div class="hero">
             <div class="heroText">
@@ -6,7 +10,8 @@
                 <button>Nimm Kontakt auf!</button>
             </div>
             <div>
-                <img class="heroImg" src="../../public/img/wandern.jpg" alt="Wandern">
+                <!-- <img class="heroImg" src="../../public/img/wandern.jpg" alt="Wandern"> -->
+                <TiltingCard/>
             </div>
         </div>
 </template>
@@ -16,8 +21,8 @@
     display: grid;
     grid-template-columns: 50% 50%;
     grid-gap: 8px;
-    margin: 0 8px 0 8px;
-    padding: 0 8px 0 8px;
+    margin: 64px 8px 0 8px;
+    padding: 16px 8px 0 8px;
 }
 
 .heroImg {

diff --git a/src/components/TiltingCard.vue b/src/components/TiltingCard.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="tiltingCard">
+
+        <div class="mousePositionTracker">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+
+    </div>
+</template>
+
+<style>
+.tiltingCard {
+    --perspective: 500px;
+    --rotateX: 0;
+    --rotateY: 0;
+    --angle: 15deg;
+    
+    height: 50vh;
+    width: 100%;
+  
+    position: relative;
+    display: grid;
+    place-content: center;
+    text-align: center;
+    box-shadow: 0 0 8px gray;
+    padding: 2rem;
+    background-image: url(../../public/img/wandern.jpg);
+    background-size: cover;
+    background-position: bottom center;
+    /*aspect-ratio: 1 / 2;*/
+    transform: perspective(var(--perspective)) rotateX(var(--rotateX))
+      rotateY(var(--rotateY));
+    transition: transform 350ms ease;
+  }
+  
+  
+  .mousePositionTracker {
+    position:absolute;
+    inset:0;
+  }
+  
+  .mousePositionTracker > div {
+    position: absolute;
+    width: calc(100% / 3);
+    height: calc(100% / 3);
+    z-index: 2;
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(1):hover) {
+    --rotateX: var(--angle);
+    --rotateY: calc(var(--angle) * -1);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(2):hover) {
+    --rotateX: var(--angle);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(3):hover) {
+    --rotateX: var(--angle);
+    --rotateY: var(--angle);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(4):hover) {
+    --rotateY: calc(var(--angle) * -1);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(6):hover) {
+    --rotateY: var(--angle);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(7):hover) {
+    --rotateX: calc(var(--angle) * -1);
+    --rotateY: calc(var(--angle) * -1);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(8):hover) {
+    --rotateX: calc(var(--angle) * -1);
+  }
+  
+  .tiltingCard:has(.mousePositionTracker > div:nth-child(9):hover) {
+    --rotateX: calc(var(--angle) * -1);
+    --rotateY: var(--angle);
+  }
+  
+  /* 1st 4th 7th */
+  .mousePositionTracker > div:nth-of-type(3n - 2) {
+    left:0;
+  }
+  
+  /* 2nd 5th 8th */
+  .mousePositionTracker > div:nth-of-type(3n - 1) {
+    left:calc(100% / 3)
+  }
+  
+  /* 3rd 6th 9th */
+  .mousePositionTracker > div:nth-of-type(3n) {
+    right:0;
+  }
+  
+  /* 1-3 */
+  .mousePositionTracker > div:nth-child(n + 1):nth-child(-n + 3) {
+    top:0;
+  }
+  
+  /* 4-6 */
+  .mousePositionTracker > div:nth-child(n + 4):nth-child(-n + 6) {
+    top:calc(100% / 3);
+  }
+  
+  /* 7-9 */
+  .mousePositionTracker > div:nth-child(n + 7):nth-child(-n + 9) {
+    bottom:0;
+  }
+</style>