Holy Fuckles It's the 3D Knuckles

This commit is contained in:
Pablo Moyano 2023-10-06 19:32:00 +02:00
parent 70b7242199
commit 5008e06064
5 changed files with 94 additions and 13 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 102 KiB

View File

@ -0,0 +1,88 @@
---
import foscLogo from "../assets/img/fosc-logo-old.png";
import { Image } from "astro:assets";
---
<div id="container" class="mt-[10vh] h-[30vh]">
<Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
</div>
<style>
#logo {
/* Add border styles to create thickness */
border: -2px solid #ccc; /* Adjust border width for thickness */
border-radius: 50%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); /* Optional: Add a shadow for depth */
}
#container {
perspective: 400px; /* Add perspective to the container for 3D effect */
}
</style>
<script>
// script.ts
interface LogoElement extends HTMLElement {
rotationX: number;
rotationY: number;
}
const logo = document.querySelector("#logo") as LogoElement;
const logoContainer = document.querySelector("#container") as HTMLElement;
let sensitivity = 20; // Adjust the sensitivity as needed
let mouseX = 0;
let mouseY = 0;
let targetRotationX = 0;
let targetRotationY = 0;
function updateLogoRotation() {
const { left, top, width, height } = logoContainer.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const dx = (mouseX - centerX) / sensitivity;
const dy = (mouseY - centerY) / sensitivity;
targetRotationX = -dy;
targetRotationY = dx;
}
function animateRotation() {
const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
const dx = targetRotationX - logo.rotationX;
const dy = targetRotationY - logo.rotationY;
logo.rotationX += dx * smoothingFactor;
logo.rotationY += dy * smoothingFactor;
logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
requestAnimationFrame(animateRotation);
}
document.addEventListener('mousemove', (e: MouseEvent) => {
mouseX = e.clientX;
mouseY = e.clientY;
updateLogoRotation();
});
document.addEventListener('mouseleave', () => {
mouseX = 0;
mouseY = 0;
targetRotationX = 0;
targetRotationY = 0;
updateLogoRotation();
});
// Initial rotation values
logo.rotationX = 0;
logo.rotationY = 0;
animateRotation();
</script>

View File

@ -6,10 +6,4 @@ interface Props {
const { href, title } = Astro.props;
---
<li>
<a
href={href}
class=""
>{title}
</a>
</li>
<li><a href={href}>{title}</a></li>

View File

@ -6,7 +6,7 @@ import NavItem from "./NavItem.astro";
import foscLogo from '../assets/img/fosc-logo-new.png'
---
<div class="navbar backdrop-blur backdrop-brightness-50 drop-shadow-lg">
<div class="navbar bg-base-100 backdrop-blur backdrop-brightness-50 drop-shadow-lg">
<div class="navbar-start">
<!-- <Image class="h-24 w-auto" src={foscLogo} alt="FOSC Logo"/> -->

View File

@ -3,6 +3,7 @@ import "@/styles/globals.css";
import Navbar from "../components/Navbar.astro";
import HackerText from "../components/HackerText.astro";
import Badge from "../components/Badge.astro"
// Image imports
import { Image } from "astro:assets";
@ -48,9 +49,7 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<!-- Floating center items -->
<div class="container-sm mx-auto px-4 flex flex-col justify-center items-center">
<div class="mt-[10vh] h-[30vh]">
<Image class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
</div>
<Badge></Badge>
<HackerText text="FOSC"></HackerText>
</div>
@ -68,9 +67,9 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
</html>
<style>
body {
/* body {
background-color: black !important;
background-image: url(../img/coreboot2.webp);
}
} */
</style>