3d hover for poster

OSURoboticsClub · Sep 24, 2024 · b2a9258 · b2a9258
1 parent 03d8322
commit b2a9258
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 36 deletions.
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -1,4 +1,6 @@
 // App JavaScript can go here
+const UniversalTilt = require('universal-tilt.js');
+
 
 window.addEventListener('scroll', (_, ev) => {
  // console.log(window.scrollY);
@@ -31,3 +33,19 @@ document.getElementById("menuToggle").addEventListener("click", () => {
  }
 });
 
+// Universal Tilt
+UniversalTilt.init({
+ elements: document.querySelectorAll('[tilt]'),
+ settings: {
+ // options...
+ shine: true,
+ 'shine-opacity': 0.5,
+ 'shine-save': true,
+ scale: 1.2,
+ exclude: /(iPod|iPhone|iPad|Android)/
+ },
+ callbacks: {
+ // callbacks...
+ }
+});
+
diff --git a/layouts/partials/poster.html b/layouts/partials/poster.html
@@ -1,36 +1,38 @@
 <!-- Poster display -->
-<section id="poster_popup"
- class="fixed flex items-center justify-center inset-0 w-full h-full bg-black/80 z-40">
- <div class="w-80 sm:w-96 aspect-[calc(461/619)] relative rounded-md bg-neutral-600">
- <img src="/images/posters/kickoff2024.png" class="w-full h-auto rounded-md pointer-events-auto" alt="">
- <div class="flex absolute items-center justify-between -top-9 right-0 left-0 w-full">
- <div class="uppercase font-display font-semibold text-[19px]">dam robotics</div>
- <button poster_close id="close_poster_popup" class="underline hover:opacity-70">
- close
- </button>
- </div>
+<section id="poster_popup" class="fixed flex items-center justify-center inset-0 w-full h-full bg-black/80 z-40">
+ <div class="w-80 sm:w-96 aspect-[calc(461/619)] relative ">
+ <div tilt class="z-50 relative rounded-lg overflow-hidden bg-neutral-600 shadow-xl">
+ <img src="/images/posters/kickoff2024.png" class="w-full h-auto pointer-events-auto" alt="">
+ </div>
 
+ <div class="flex z-0 absolute items-center justify-between -top-9 right-0 left-0 w-full">
+ <div class="uppercase font-display font-semibold text-[19px]">dam robotics</div>
+ <button poster_close id="close_poster_popup" class="underline hover:opacity-70">
+ close
+ </button>
  </div>
+
+ </div>
 </section>
 
 <script>
-  const close_poster = () => {
-  console.log('close_poster')
-  document.getElementById('poster_popup').style.display = "none"
-  sessionStorage.setItem('hide_popup', true)
-  }
-  const open_poster = () => {
-  document.getElementById('poster_popup').style.display = "flex"
-  }
+ const close_poster = () => {
+ console.log('close_poster')
+ document.getElementById('poster_popup').style.display = "none"
+ sessionStorage.setItem('hide_popup', true)
+ }
+ const open_poster = () => {
+ document.getElementById('poster_popup').style.display = "flex"
+ }
 
-  // Close poster if already dismissed once
-  if (sessionStorage.getItem('hide_popup'))
-  close_poster()
+ // Close poster if already dismissed once
+ if (sessionStorage.getItem('hide_popup'))
+ close_poster()
 
-  // Close poster on click
-  document.getElementById('close_poster_popup').addEventListener('click', close_poster)
-  // document.querySelectorAll('[poster_close]').forEach((el) => el.addEventListener('click', close_poster))
+ // Close poster on click
+ document.getElementById('close_poster_popup').addEventListener('click', close_poster)
+ // document.querySelectorAll('[poster_close]').forEach((el) => el.addEventListener('click', close_poster))
 
-  // Open poster on click
-  document.querySelectorAll('[poster_open]').forEach((el) => el.addEventListener('click', open_poster))
+ // Open poster on click
+ document.querySelectorAll('[poster_open]').forEach((el) => el.addEventListener('click', open_poster))
 </script>
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
  "name": "hugo-starter-tailwind-basic",
  "version": "0.1.0",
  "dependencies": {
- "laravel-mix": "^6.0.49"
+ "laravel-mix": "^6.0.49",
+ "universal-tilt.js": "^2.0.6"
  }
 }
diff --git a/static/css/styles.css b/static/css/styles.css
@@ -904,9 +904,6 @@ video {
  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
 }
-.pointer-events-none {
- pointer-events: none;
-}
 .pointer-events-auto {
  pointer-events: auto;
 }
@@ -958,6 +955,9 @@ video {
 .z-40 {
  z-index: 40;
 }
+.z-50 {
+ z-index: 50;
+}
 .col-span-3 {
  grid-column: span 3 / span 3;
 }
@@ -1789,10 +1789,6 @@ video {
 
 @media (min-width: 768px) {
 
- .md\:pointer-events-auto {
- pointer-events: auto;
- }
-
  .md\:-right-1 {
  right: -0.25rem;
  }

diff --git a/static/js/app.js b/static/js/app.js
diff --git a/yarn.lock b/yarn.lock
@@ -4054,6 +4054,11 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
  dependencies:
  find-up "^4.0.0"
 
+platform@^1.3.5:
+ version "1.3.6"
+ resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.6.tgz#48b4ce983164b209c2d45a107adb31f473a6e7a7"
+ integrity sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==
+
 postcss-calc@^8.2.3:
  version "8.2.4"
  resolved "https://registry.npmjs.org/postcss-calc/-/postcss-calc-8.2.4.tgz"
@@ -5219,6 +5224,13 @@ unicode-property-aliases-ecmascript@^2.0.0:
  resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz"
  integrity sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==
 
+universal-tilt.js@^2.0.6:
+ version "2.0.6"
+ resolved "https://registry.yarnpkg.com/universal-tilt.js/-/universal-tilt.js-2.0.6.tgz#71de01ee5435c190209a9efec43aa33bf01a5b05"
+ integrity sha512-1d0BM4PaaaKgOfnX2rx0v5wk6oF2psxXnOzTLKLZloWVHzKNJnDW+bezZ6VshTKH9dbgiWFZG0yY71On/lxygA==
+ dependencies:
+ platform "^1.3.5"
+
 universalify@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz"