feat: Parallax effect added in almost all the screens(excluding ipads…

… and tablets)
aulasoftwarelibre · Nov 6, 2024 · 2398e93 · 2398e93
1 parent 793ce57
commit 2398e93
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 4 deletions.
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -2,16 +2,84 @@
     max-width: 100%;
     overflow-x: hidden;
     overflow-y: hidden;
-
-
 }
 
+.tomato {
+    transition: transform 1s ease-out;
+    transform: translate3d(0px);
+}
+
+.moved3dtomato{
+    transform: translate3d(-2.7rem, -15rem, 1rem);
+}
+
+.ajo {
+    transition: transform 1s ease-out;
+    transform: translate3d(0px);
+}
+
+.movedRight { /*movimiento del ajo*/
+    transform: translate3d(160px, -102px, -100px); 
+}
+
+.normalText, .movedText {
+    position: relative;
+    transition: transform 1s ease-out;
+}
+
+.normalText {
+    transform: translateY(0px);
+}
+
+.movedText {
+    transform: translateY(-100px);
+}
+
+.trigo {
+    transition: transform 1s ease-out;
+    transform: translate3d(0px);
+}
+
+.movedWheat{
+    transform: translate3d(-50px, -102px, -100px);
+}
+
+.wifi {
+    transition: transform 1s ease-out;
+    transform: translate3d(0px);
+}
+
+.movedWifi{
+    transform: translateX(200px);
+}
+
+.penguin {
+    transition: transform 1s ease-out;
+    transform: translate3d(0px);
+}
+
+.movedPingu{
+    transform: translateY(-60px);
+    transform: translate(50px, -100px);
+}
+
+
+
 @media (min-width: 1160px){
     .headerContainer{
         margin-bottom: -500px;
     }
 }
 
+@media (max-width: 767px) and (min-width: 440px){
+    .headerContainer{
+        margin-bottom: -350px;
+    }
+}
+
+
+
+
 .buttonInicio {
     display: block;
     align-items: center;
@@ -123,6 +191,29 @@
         height: auto;
     }
 
+    .moved3dtomato{
+        transform: translate3d(-3.5rem, -75%, 1rem);
+    }
+
+    .movedRight {
+        transform: translate3d(160px, -60%, -100px);
+    }
+
+    .normalText {
+        transform: translateY(0px);
+    }
+
+    .movedText {
+        transform: translateY(-100px);
+    }
+
+    .movedWheat{
+        transform: translate3d(-50px, -50%, -100px);
+    }
+
+    .movedWifi{
+        transform: translateX(53%);
+    }
 
 
 }
@@ -234,7 +325,9 @@
         transform: translate(50px, -100px);
 
     }
-
+    .movedWifi{
+        transform: translateX(200px);
+    }
 
 
 }
@@ -301,6 +394,37 @@
         width: 25vw;
         height: auto;
     }
+
+    .normalText {
+        transform: translateY(0px);
+    }
+
+    .movedText {
+        transform: translateY(-100px);
+    }
+
+    .moved3dtomato{
+        transform: translate3d(-3.5rem, -75%, 1rem);
+    }
+
+    .movedRight {
+        transform: translate3d(60px, -40%, -100px);
+    }
+
+
+    .movedWheat{
+        transform: translate3d(-25px, -20%, -100px);
+    }
+
+    .movedWifi{
+        transform: translateX(65%);
+    }
+
+    .movedPingu{
+        transform: translate3d(15px, -65px,-100px);
+
+    }
+
 }
 
 
@@ -377,6 +501,36 @@
         position: relative;
         right: 0%;
     }
+
+    .normalText {
+        transform: translateY(0px);
+    }
+
+    .movedText {
+        transform: translateY(-75px);
+    }
+
+    .moved3dtomato{
+        transform: translate3d(-3.5rem, -75%, 1rem);
+    }
+
+    .movedRight {
+        transform: translate3d(50px, -30%, -100px);
+    }
+
+
+    .movedWheat{
+        transform: translate3d(-25px, -20%, -100px);
+    }
+
+    .movedWifi{
+        transform: translateX(65%);
+    }
+
+    .movedPingu{
+        transform: translate3d(15px, -65px,-100px);
+
+    }
 }
 
 
@@ -434,6 +588,37 @@
         height: auto;
     }
 
+
+    .normalText {
+        transform: translateY(0px);
+    }
+
+    .movedText {
+        transform: translateY(-65px);
+    }
+
+    .moved3dtomato{
+        transform: translate3d(-3.5rem, -85%, 1rem);
+    }
+
+    .movedRight {
+        transform: translate3d(50px, -30%, -100px);
+    }
+
+
+    .movedWheat{
+        transform: translate3d(-25px, -20%, -100px);
+    }
+
+    .movedWifi{
+        transform: translateX(65%);
+    }
+
+    .movedPingu{
+        transform: translateX(-1000px,);
+
+    }
+
 }
 
 

diff --git a/src/supabase/server.tsx b/src/supabase/server.tsx
@@ -1,3 +1,3 @@
 import { createClient } from "@supabase/supabase-js";
 
-export const supabase = createClient(import.meta.env.VITE_SOME_KEY|| " ", import.meta.env.VITE_SUPABASE_ANON_KEY ||" ");
+export const supabase = createClient("https://gtvwlxhwpngxrfmrqzar.supabase.co","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imd0dndseGh3cG5neHJmbXJxemFyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjcyODEyMzYsImV4cCI6MjA0Mjg1NzIzNn0.4n7preawGleulQXLrMiAAQ5EK1qh4tI1C--Jy8gAG9c")