This commit is contained in:
Pablo Moyano
parent
12fbb048f4
commit
4f44e0f880
|
|
@ -20,6 +20,7 @@
|
|||
"lucide-react": "^0.274.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.69.0",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
|
@ -2507,6 +2508,11 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"node_modules/immutable": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
|
||||
"integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA=="
|
||||
},
|
||||
"node_modules/import-meta-resolve": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-3.0.0.tgz",
|
||||
|
|
@ -5212,6 +5218,22 @@
|
|||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.69.0",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.69.0.tgz",
|
||||
"integrity": "sha512-l3bbFpfTOGgQZCLU/gvm1lbsQ5mC/WnLz3djL2v4WCJBDrWm58PO+jgngcGRNnKUh6wSsdm50YaovTqskZ0xDQ==",
|
||||
"dependencies": {
|
||||
"chokidar": ">=3.0.0 <4.0.0",
|
||||
"immutable": "^4.0.0",
|
||||
"source-map-js": ">=0.6.2 <2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"sass": "sass.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
"lucide-react": "^0.274.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sass": "^1.69.0",
|
||||
"tailwind-merge": "^1.14.0",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
|
|
|||
|
|
@ -1,44 +1,42 @@
|
|||
---
|
||||
import foscLogo from "../assets/img/fosc-logo-old.png";
|
||||
import { Image } from "astro:assets";
|
||||
|
||||
---
|
||||
|
||||
<div id="container" class="h-[30vh]">
|
||||
<Image id="logo" class="h-full w-auto" src={foscLogo} alt="FOSC Logo" />
|
||||
<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 */
|
||||
}
|
||||
#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 {
|
||||
// script.ts
|
||||
interface LogoElement extends HTMLElement {
|
||||
rotationX: number;
|
||||
rotationY: number;
|
||||
}
|
||||
}
|
||||
|
||||
const logo = document.querySelector("#logo") as LogoElement;
|
||||
const logoContainer = document.querySelector("#container") as HTMLElement;
|
||||
const logo = document.querySelector("#logo") as LogoElement;
|
||||
const logoContainer = document.querySelector("#container") as HTMLElement;
|
||||
|
||||
let sensitivity = 100; // Adjust the sensitivity as needed
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let targetRotationX = 0;
|
||||
let targetRotationY = 0;
|
||||
let sensitivity = 100; // Adjust the sensitivity as needed
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let targetRotationX = 0;
|
||||
let targetRotationY = 0;
|
||||
|
||||
function updateLogoRotation() {
|
||||
function updateLogoRotation() {
|
||||
const { left, top, width, height } = logoContainer.getBoundingClientRect();
|
||||
const centerX = left + width / 2;
|
||||
const centerY = top + height / 2;
|
||||
|
|
@ -48,9 +46,9 @@ function updateLogoRotation() {
|
|||
|
||||
targetRotationX = -dy;
|
||||
targetRotationY = dx;
|
||||
}
|
||||
}
|
||||
|
||||
function animateRotation() {
|
||||
function animateRotation() {
|
||||
const smoothingFactor = 0.1; // Adjust this value for smoother or more abrupt transitions
|
||||
|
||||
const dx = targetRotationX - logo.rotationX;
|
||||
|
|
@ -62,27 +60,25 @@ function animateRotation() {
|
|||
logo.style.transform = `rotateX(${logo.rotationX}deg) rotateY(${logo.rotationY}deg)`;
|
||||
|
||||
requestAnimationFrame(animateRotation);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('mousemove', (e: MouseEvent) => {
|
||||
document.addEventListener("mousemove", (e: MouseEvent) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
updateLogoRotation();
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('mouseleave', () => {
|
||||
document.addEventListener("mouseleave", () => {
|
||||
mouseX = 0;
|
||||
mouseY = 0;
|
||||
targetRotationX = 0;
|
||||
targetRotationY = 0;
|
||||
updateLogoRotation();
|
||||
});
|
||||
});
|
||||
|
||||
// Initial rotation values
|
||||
logo.rotationX = 0;
|
||||
logo.rotationY = 0;
|
||||
// Initial rotation values
|
||||
logo.rotationX = 0;
|
||||
logo.rotationY = 0;
|
||||
|
||||
animateRotation();
|
||||
|
||||
|
||||
</script>
|
||||
animateRotation();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ interface Props {
|
|||
const { text } = Astro.props;
|
||||
---
|
||||
|
||||
<p id="text" data-value={text} class="mt-4 text-center text-7xl font-['Researcher']">{text}</p>
|
||||
<p id="text" data-value={text} class="drop-shadow-lg mt-4 text-center text-7xl font-['Researcher']">{text}</p>
|
||||
|
||||
<script>
|
||||
// Code I stole
|
||||
|
|
|
|||
Loading…
Reference in New Issue