Radiquum/radiquum.github.io
1
0
Fork 0
mirror of https://github.com/Radiquum/radiquum.github.io.git synced 2025-04-05 15:54:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: header animation

Browse source
This commit is contained in:
Kentai Radiquum 2024-11-24 22:32:44 +05:00
parent edd37aab83
commit 90ecc9143d
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 72 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -35,7 +35,7 @@
<body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black"> <body class="flex flex-col gap-8 overflow-x-hidden bg-bg-black">
<header <header
class="fixed top-0 left-0 right-0 z-10 w-full text-white opacity-[var(--header-opacity,0)] bg-bg-pink rounded-b-lg" class="fixed top-0 left-0 right-0 z-10 w-full text-white -translate-y-full transition-transform bg-bg-pink rounded-b-lg"
id="header"> id="header">
<div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between"> <div class="container flex flex-wrap gap-1 mx-auto sm:items-center sm:justify-between">
<a href="#landing"> <a href="#landing">

103
static/script.js
View file

@ -7,8 +7,7 @@ const IMAGE_ANIMATION_DELAY = 1000;
const IMAGE_TRANSITION_DELAY = 1000; const IMAGE_TRANSITION_DELAY = 1000;
// Header percentages // Header percentages
const HEADER_ACTIVATION_PERCENT = 0.4; const HEADER_ACTIVATION_PERCENT = 0.8;
const HEADER_DEACTIVATION_PERCENT = 0.8;
// THIS IS NOT CONSTANTS, BUT A GLOBAL VAR FOR TIMERS IN SONG NAME CHANGE!!! // THIS IS NOT CONSTANTS, BUT A GLOBAL VAR FOR TIMERS IN SONG NAME CHANGE!!!
let DELETE_INTERVAL = null; let DELETE_INTERVAL = null;
@ -92,77 +91,87 @@ async function updatePlayingTrack() {
} }
const header = document.getElementById("header"); const header = document.getElementById("header");
let last_Y_pos = 0; const landingBlock = document.getElementById("landing");
let header_opacity = 0;
window.onscroll = () => { window.onscroll = () => {
let landingBlock = document.getElementById("landing").clientHeight; const current_Y_pos = window.scrollY;
if (window.scrollY < (landingBlock * HEADER_ACTIVATION_PERCENT)) { if (
header.style.display = "none"; current_Y_pos >
Math.floor(landingBlock.clientHeight * HEADER_ACTIVATION_PERCENT)
) {
header.style.setProperty("--tw-translate-y", "0%");
} else { } else {
header.style.display = "block"; header.style.setProperty("--tw-translate-y", "-100%");
} }
if (window.scrollY > last_Y_pos && window.scrollY > (landingBlock * HEADER_ACTIVATION_PERCENT)) {
header_opacity += 0.1;
} else if (window.scrollY < last_Y_pos && window.scrollY < (landingBlock * HEADER_DEACTIVATION_PERCENT)) {
header_opacity -= 0.1;
}
if (header_opacity > 1) {
header_opacity = 1;
} else if (header_opacity < 0) {
header_opacity = 0;
}
last_Y_pos = window.scrollY;
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
}; };
function setPhotoSectionImagesMargin() { function setPhotoSectionImagesMargin() {
const photoSectionImages = document.querySelectorAll("[data-section-image='photos']") const photoSectionImages = document.querySelectorAll(
"[data-section-image='photos']"
);
for (i = 0; i < photoSectionImages.length; i++) { for (i = 0; i < photoSectionImages.length; i++) {
photoSectionImages[i].style.setProperty("--transform-duration", `${IMAGE_TRANSITION_DELAY}ms`) photoSectionImages[i].style.setProperty(
"--transform-duration",
`${IMAGE_TRANSITION_DELAY}ms`
);
} }
for (i = 1; i < photoSectionImages.length; i++) { for (i = 1; i < photoSectionImages.length; i++) {
photoSectionImages[i].style.setProperty("--transform-y", `calc(376px*-${i})`) photoSectionImages[i].style.setProperty(
photoSectionImages[i].style.setProperty("display", `none`) "--transform-y",
`calc(376px*-${i})`
);
photoSectionImages[i].style.setProperty("display", `none`);
} }
} }
function changePhotoSectionImage() { function changePhotoSectionImage() {
const photoSectionImages = document.querySelectorAll("[data-section-image='photos']") const photoSectionImages = document.querySelectorAll(
const photoSectionContainer = document.getElementById("photos-image") "[data-section-image='photos']"
photoSectionImages[1].style.setProperty("display", `block`) );
const photoSectionContainer = document.getElementById("photos-image");
photoSectionImages[1].style.setProperty("display", `block`);
setTimeout(() => { setTimeout(() => {
photoSectionImages[0].style.setProperty("--transform-y", `376px`) photoSectionImages[0].style.setProperty("--transform-y", `376px`);
photoSectionImages[1].style.setProperty("--transform-y", `0px`) photoSectionImages[1].style.setProperty("--transform-y", `0px`);
}, IMAGE_TRANSITION_DELAY / 2) }, IMAGE_TRANSITION_DELAY / 2);
setTimeout(() => { setTimeout(() => {
photoSectionImages[0].style.setProperty("display", `none`) photoSectionImages[0].style.setProperty("display", `none`);
const backEl = document.querySelector(`[data-section-image='photos'][data-slide='0']`).cloneNode(true) const backEl = document
photoSectionContainer.removeChild(document.querySelector(`[data-section-image='photos'][data-slide='0']`)) .querySelector(`[data-section-image='photos'][data-slide='0']`)
backEl.setAttribute('data-slide', photoSectionImages.length - 1) .cloneNode(true);
photoSectionContainer.appendChild(backEl) photoSectionContainer.removeChild(
}, (IMAGE_ANIMATION_DELAY + IMAGE_TRANSITION_DELAY)) document.querySelector(`[data-section-image='photos'][data-slide='0']`)
);
backEl.setAttribute("data-slide", photoSectionImages.length - 1);
photoSectionContainer.appendChild(backEl);
}, IMAGE_ANIMATION_DELAY + IMAGE_TRANSITION_DELAY);
setTimeout(() => { setTimeout(() => {
const photoSectionImagesRev = document.querySelectorAll("[data-section-image='photos']") const photoSectionImagesRev = document.querySelectorAll(
"[data-section-image='photos']"
);
for (i = 1; i < photoSectionImagesRev.length; i++) { for (i = 1; i < photoSectionImagesRev.length; i++) {
const element = document.querySelector(`[data-section-image='photos'][data-slide='${i}']`) const element = document.querySelector(
element.style.setProperty("--transform-y", `calc(376px*-${Number(element.getAttribute('data-slide')) - 1})`) `[data-section-image='photos'][data-slide='${i}']`
element.setAttribute('data-slide', Number(element.getAttribute('data-slide')) - 1) );
element.style.setProperty(
"--transform-y",
`calc(376px*-${Number(element.getAttribute("data-slide")) - 1})`
);
element.setAttribute(
"data-slide",
Number(element.getAttribute("data-slide")) - 1
);
} }
}, (IMAGE_ANIMATION_DELAY + (IMAGE_TRANSITION_DELAY + 500))) }, IMAGE_ANIMATION_DELAY + (IMAGE_TRANSITION_DELAY + 500));
} }
window.onload = () => { window.onload = () => {
updatePlayingTrack(); updatePlayingTrack();
setInterval(updatePlayingTrack, 180000); setInterval(updatePlayingTrack, 180000);
setPhotoSectionImagesMargin() setPhotoSectionImagesMargin();
setInterval(changePhotoSectionImage, IMAGE_CHANGE_DELAY); setInterval(changePhotoSectionImage, IMAGE_CHANGE_DELAY);
}; };

15
static/tailwind.css
View file

@ -799,6 +799,21 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.translate-y-6 {
--tw-translate-y: 1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-6 {
--tw-translate-y: -1.5rem;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-full {
--tw-translate-y: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce { @keyframes bounce {
0%, 100% { 0%, 100% {
transform: translateY(-25%); transform: translateY(-25%);