mirror of
https://github.com/Radiquum/radiquum.github.io.git
synced 2025-04-05 07:44:33 +00:00
feat: add animations
This commit is contained in:
parent
1f4628a259
commit
53c4d26eaa
GPG key ID:
858E8EE696525EED
4 changed files with 238 additions and 98 deletions
|
|
@ -46,8 +46,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="flex items-end justify-end w-full max-w-[45%] gap-4 p-8 font-medium text-4xl mb-[3%]">
|
||||
<a class="w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#section_about">READ MORE</a>
|
||||
<a class="w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue hover:bg-opacity-85 transition-colors" href="#section_links">LINKS</a>
|
||||
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[320px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_about">READ MORE</a>
|
||||
<a class="border-black border-4 hover:translate-x-2 hover:-translate-y-2 shadow-transparent hover:shadow-md hover:shadow-black transition-all border-t-8 border-l-8 border-solid w-[300px] h-[75px] flex items-end justify-end pr-2 pb-2 bg-bg-blue" href="#section_links">LINKS</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,3 +29,38 @@ body {
|
|||
.bio {
|
||||
font-family: 'Fira Mono', monospace;
|
||||
}
|
||||
|
||||
#track-name::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
background-color: var(--cursor-color, transparent);
|
||||
-webkit-animation: var(--cursor-animation, none) 1s infinite;
|
||||
animation: var(--cursor-animation, none) 1s infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
126
static/script.js
126
static/script.js
|
|
@ -1,5 +1,60 @@
|
|||
function updatePlayingTrack() {
|
||||
function sleep(time) {
|
||||
return new Promise((resolve) => setTimeout(resolve, time));
|
||||
}
|
||||
|
||||
const SYMBOL_DELAY = 150;
|
||||
|
||||
function deletePreviousTrack(newTrackName) {
|
||||
const trackName = document.getElementById("track-name");
|
||||
const prevTrackNameLen = trackName.innerHTML.length;
|
||||
trackName.style.setProperty("--cursor-animation", "none");
|
||||
|
||||
let removed = 0;
|
||||
const interval = setInterval(() => {
|
||||
removed += 1;
|
||||
trackName.innerHTML = trackName.innerHTML.substring(
|
||||
0,
|
||||
prevTrackNameLen - removed
|
||||
);
|
||||
|
||||
if (removed == prevTrackNameLen - 1) {
|
||||
clearInterval(interval);
|
||||
updateTrack(newTrackName);
|
||||
return true;
|
||||
}
|
||||
}, SYMBOL_DELAY);
|
||||
}
|
||||
|
||||
function updateTrack(newTrackName) {
|
||||
const trackName = document.getElementById("track-name");
|
||||
const TrackNameLen = newTrackName.length;
|
||||
|
||||
let added = 0;
|
||||
const interval = setInterval(() => {
|
||||
if (added < TrackNameLen) {
|
||||
trackName.innerHTML += newTrackName[added];
|
||||
console.log(added, TrackNameLen, newTrackName[added]);
|
||||
added += 1;
|
||||
}
|
||||
|
||||
if (added == TrackNameLen) {
|
||||
clearInterval(interval);
|
||||
setTimeout(() => {
|
||||
trackName.innerHTML += '"';
|
||||
}, SYMBOL_DELAY);
|
||||
trackName.style.setProperty("--cursor-animation", "blink");
|
||||
setTimeout(() => {
|
||||
trackName.style.setProperty("--cursor-color", "transparent");
|
||||
}, SYMBOL_DELAY * 3);
|
||||
return true;
|
||||
}
|
||||
}, SYMBOL_DELAY);
|
||||
}
|
||||
|
||||
async function updatePlayingTrack() {
|
||||
const trackName = document.getElementById("track-name");
|
||||
const prevTrackName = trackName.innerHTML;
|
||||
const prevTrackNameLen = trackName.innerHTML.length;
|
||||
|
||||
fetch("https://lastfm-last-played.biancarosa.com.br/radiquum/latest-song")
|
||||
.then((res) => {
|
||||
|
|
@ -9,54 +64,63 @@ function updatePlayingTrack() {
|
|||
return res.json();
|
||||
})
|
||||
.then((data) => {
|
||||
trackName.innerHTML = `"${data.track.artist['#text']} - ${data.track.name}"`;
|
||||
if (
|
||||
prevTrackName != `"${data.track.artist["#text"]} - ${data.track.name}"`
|
||||
) {
|
||||
trackName.style.setProperty("--cursor-color", "#fff");
|
||||
trackName.style.setProperty("--cursor-animation", "blink");
|
||||
|
||||
setTimeout(() => {
|
||||
deletePreviousTrack(
|
||||
`${data.track.artist["#text"]} - ${data.track.name}`
|
||||
);
|
||||
}, SYMBOL_DELAY * 4);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
trackName.innerHTML = "\"ERROR: last.fm is not reachable\"";
|
||||
deletePreviousTrack("ERROR: last.fm is not reachable");
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
|
||||
function getScrollPosition () {
|
||||
const height =
|
||||
document.documentElement.scrollHeight -
|
||||
document.documentElement.clientHeight;
|
||||
const windowScroll = document.documentElement.scrollTop;
|
||||
const scrolled = (windowScroll / height) * 100;
|
||||
return Math.floor(scrolled)
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
updatePlayingTrack();
|
||||
setInterval(updatePlayingTrack, 360000);
|
||||
setInterval(updatePlayingTrack, 180000);
|
||||
};
|
||||
|
||||
function getScrollPosition() {
|
||||
const height =
|
||||
document.documentElement.scrollHeight -
|
||||
document.documentElement.clientHeight;
|
||||
const windowScroll = document.documentElement.scrollTop;
|
||||
const scrolled = (windowScroll / height) * 100;
|
||||
return Math.floor(scrolled);
|
||||
}
|
||||
const header = document.getElementById("header")
|
||||
let last_Y_pos = 0
|
||||
let header_opacity = 0
|
||||
|
||||
const header = document.getElementById("header");
|
||||
let last_Y_pos = 0;
|
||||
let header_opacity = 0;
|
||||
|
||||
window.onscroll = () => {
|
||||
let scrollPosition = getScrollPosition()
|
||||
console.log(last_Y_pos, window.scrollY, scrollPosition, header_opacity)
|
||||
let scrollPosition = getScrollPosition();
|
||||
|
||||
if (scrollPosition < 1) {
|
||||
header.style.display = "none"
|
||||
header.style.display = "none";
|
||||
} else {
|
||||
header.style.display = "block"
|
||||
header.style.display = "block";
|
||||
}
|
||||
|
||||
|
||||
if ((window.scrollY > last_Y_pos) && (scrollPosition > 1)) {
|
||||
header_opacity += 0.1
|
||||
} else if ((window.scrollY < last_Y_pos) && (scrollPosition < 1)) (
|
||||
header_opacity -= 0.1
|
||||
)
|
||||
last_Y_pos = window.scrollY
|
||||
if (window.scrollY > last_Y_pos && scrollPosition > 1) {
|
||||
header_opacity += 0.1;
|
||||
} else if (window.scrollY < last_Y_pos && scrollPosition < 1)
|
||||
header_opacity -= 0.1;
|
||||
last_Y_pos = window.scrollY;
|
||||
|
||||
if (header_opacity > 1) {
|
||||
header_opacity = 1
|
||||
header_opacity = 1;
|
||||
} else if (header_opacity < 0) {
|
||||
header_opacity = 0
|
||||
header_opacity = 0;
|
||||
}
|
||||
|
||||
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`)
|
||||
}
|
||||
header.style.setProperty("--header-opacity", `${header_opacity.toFixed(2)}`);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -600,8 +600,8 @@ video {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.right-0 {
|
||||
|
|
@ -612,10 +612,6 @@ video {
|
|||
top: 0px;
|
||||
}
|
||||
|
||||
.left-0 {
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.-z-10 {
|
||||
z-index: -10;
|
||||
}
|
||||
|
|
@ -634,13 +630,7 @@ video {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.my-24 {
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 6rem;
|
||||
}
|
||||
|
||||
.my-12 {
|
||||
margin-top: 3rem;
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
|
@ -656,10 +646,6 @@ video {
|
|||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.mb-12 {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
|
@ -712,12 +698,16 @@ video {
|
|||
width: 320px;
|
||||
}
|
||||
|
||||
.w-\[64px\] {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-\[64px\] {
|
||||
width: 64px;
|
||||
.max-w-\[1200px\] {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.max-w-\[45\%\] {
|
||||
|
|
@ -732,18 +722,6 @@ video {
|
|||
max-width: 54.75%;
|
||||
}
|
||||
|
||||
.max-w-\[1200px\] {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.scroll-mt-24 {
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
.scroll-mt-1 {
|
||||
scroll-margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.scroll-mt-32 {
|
||||
scroll-margin-top: 8rem;
|
||||
}
|
||||
|
|
@ -796,6 +774,27 @@ video {
|
|||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
.border-4 {
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
.border-l-8 {
|
||||
border-left-width: 8px;
|
||||
}
|
||||
|
||||
.border-t-8 {
|
||||
border-top-width: 8px;
|
||||
}
|
||||
|
||||
.border-solid {
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.border-black {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-bg-black {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 30 30 / var(--tw-bg-opacity));
|
||||
|
|
@ -872,22 +871,14 @@ video {
|
|||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-6xl {
|
||||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
.text-xl {
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
|
|
@ -898,6 +889,14 @@ video {
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
.font-medium {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.text-bg-pink {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 71 139 / var(--tw-text-opacity));
|
||||
|
|
@ -908,16 +907,17 @@ video {
|
|||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.opacity-0 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.opacity-\[var\(--header-opacity\2c 0\)\] {
|
||||
opacity: var(--header-opacity,0);
|
||||
}
|
||||
|
||||
.transition-colors {
|
||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||
.shadow-transparent {
|
||||
--tw-shadow-color: transparent;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
|
@ -954,14 +954,55 @@ body {
|
|||
font-family: 'Fira Mono', monospace;
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-85:hover {
|
||||
--tw-bg-opacity: 0.85;
|
||||
#track-name::after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
margin-left: 4px;
|
||||
width: 8px;
|
||||
height: 24px;
|
||||
background-color: var(--cursor-color, transparent);
|
||||
animation: var(--cursor-animation, none) 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hover\:-translate-y-2:hover {
|
||||
--tw-translate-y: -0.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));
|
||||
}
|
||||
|
||||
.hover\:translate-x-2:hover {
|
||||
--tw-translate-x: 0.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));
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.hover\:shadow-md:hover {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.hover\:shadow-black:hover {
|
||||
--tw-shadow-color: #000;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.lg\:w-\[372px\] {
|
||||
width: 372px;
|
||||
|
|
@ -971,6 +1012,11 @@ body {
|
|||
width: 64px;
|
||||
}
|
||||
|
||||
.lg\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.lg\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
|
|
@ -980,14 +1026,14 @@ body {
|
|||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.lg\:text-2xl {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.xl\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
|
||||
.xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
|
|
@ -997,11 +1043,6 @@ body {
|
|||
font-size: 3.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.xl\:text-3xl {
|
||||
font-size: 1.875rem;
|
||||
line-height: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
|
|
@ -1013,6 +1054,11 @@ body {
|
|||
width: 64px;
|
||||
}
|
||||
|
||||
.\32xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
|
||||
.\32xl\:text-5xl {
|
||||
font-size: 3rem;
|
||||
line-height: 1;
|
||||
|
|
@ -1022,9 +1068,4 @@ body {
|
|||
font-size: 6rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.\32xl\:text-4xl {
|
||||
font-size: 2.25rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue