vlw/vlw.se
1
0
Fork 0
mirror of https://codeberg.org/vlw/vlw.se.git synced 2025-09-13 21:13:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: interests explosion effects clamped to screen size (#22)

Browse source
This commit is contained in:
Victor Westerlund 2024-05-06 08:02:18 +00:00 • committed by GitHub
parent f963a8993d
commit 3154afab3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 25 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/pages/about.css
View file

@ -50,6 +50,8 @@ section.version {
/* # Interests */
div.interests {
--text-shadow-blur: 30px;
transition: 300ms opacity;
position: fixed;
top: 0;
@ -58,7 +60,7 @@ div.interests {
height: 100%;
font-weight: bold;
pointer-events: none;
font-size: 50px;
font-size: clamp(16px, 15vw, 50px);
color: var(--color-accent);
overflow: hidden;
opacity: 0;
@ -70,9 +72,7 @@ div.interests.active {
}
div.interests p {
--text-shadow-blur: 30px;
transition: 300ms transform;
transition: 500ms transform cubic-bezier(.34,0,0,.99);
position: absolute;
text-shadow:
0 0 var(--text-shadow-blur) black,

38
assets/js/pages/about.js
View file

@ -6,26 +6,35 @@ const randomIntFromInterval = (min, max) => {
// Interest explosion effect from origin position
const explodeInterests = (originX, originY) => {
// Elements can not translate more than negative- and positive from this number
const TRANS_LIMIT = 300;
const wrapper = document.querySelector("div.interests");
wrapper.classList.add("active");
// Elements can not expand further than positive or negative of these values
const transLimitX = window.innerWidth / 4;
const transLimitY = window.innerHeight / 3;
[...wrapper.querySelectorAll("p")].forEach(element => {
/*
Generate random visuals for current element
*/
const size = element.getBoundingClientRect();
// Generate random HUE wheel rotation degrees
const hue = randomIntFromInterval(0, 360);
// Generate random element transform rotation
const rotate = randomIntFromInterval(-5, 5);
const transX = randomIntFromInterval(TRANS_LIMIT * -1, TRANS_LIMIT);
const transY = randomIntFromInterval(TRANS_LIMIT * -1, TRANS_LIMIT);
// Generate random offsets in each direction clamped to translation limit
let transX = randomIntFromInterval(transLimitX * -1, transLimitX);
let transY = randomIntFromInterval(transLimitY * -1, transLimitY);
// Clamp translation to screen left and right X size
transX = Math.max(0 - originX, Math.min((window.innerWidth - originX) - size.width, transX));
// Clamp translation to top and bottom Y size
transY = Math.max(0 - originY, Math.min((window.innerHeight - originY) - size.height, transY));
// Set initial position
element.style.setProperty("top", `${originY}px`);
element.style.setProperty("left", `${originX}px`);
// Set random HUE rotation
// Set HUE rotation
element.style.setProperty("-webkit-filter", `hue-rotate(${hue}deg)`);
element.style.setProperty("filter", `hue-rotate(${hue}deg)`);
@ -39,10 +48,8 @@ const implodeInterests = () => {
const wrapper = document.querySelector("div.interests");
wrapper.classList.remove("active");
[...wrapper.querySelectorAll("p")].forEach(element => {
// Reset to initial position
element.style.setProperty("transform", "translate(0, 0)");
});
// Reset to initial position
[...wrapper.querySelectorAll("p")].forEach(element => element.style.setProperty("transform", "translate(0, 0)"));
};
// Bind triggers for interests explosion and implotion
@ -55,10 +62,7 @@ const implodeInterests = () => {
// Get absolute position of the trigger element
const size = interestsElement.getBoundingClientRect();
const x = size.x - 80;
const y = size.y - 10;
explodeInterests(x, y);
explodeInterests(size.x, size.y);
});
interestsElement.addEventListener(canHover ? "mouseleave" : "touchend", () => implodeInterests());