hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2024-11-16 18:35:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Open github commits after unlocking animation (#41)

Browse source 
* Open github commits after unlocking animation

* Wait for the animation to end before opening Hyprland commits
This commit is contained in:
Hadi 2024-01-31 12:33:04 +01:00 committed by GitHub
parent 0ed35374d3
commit dd6c31ab8e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/routes/Hypractive.svelte
View file

@ -87,6 +87,7 @@
/** @type {HTMLDivElement} */ /** @type {HTMLDivElement} */
let containerElement let containerElement
let isAnimationComplete = false
const vaxrySize = 220 const vaxrySize = 220
const contextId = Symbol('hypractive context') const contextId = Symbol('hypractive context')
@ -98,12 +99,16 @@
function onClick() { function onClick() {
click$.next(1) click$.next(1)
} }
function onClickUnlocked() {
window.open('https://github.com/hyprwm/Hyprland/commits/main/', '_blank')
}
</script> </script>
<div class="relative overflow-visible"> <div class="relative overflow-visible">
<button <button
class="flex items-center gap-3 font-bold text-slate-400 shadow-black drop-shadow-lg transition-colors hover:underline active:scale-95" class="flex items-center gap-3 font-bold text-slate-400 shadow-black drop-shadow-lg transition-colors hover:underline active:scale-95"
on:click={onClick} on:click={isAnimationComplete ? onClickUnlocked : onClick}
style:color={$relativeLevel$ > 0 ? `hsl(${hue} 64% 53%)` : undefined} style:color={$relativeLevel$ > 0 ? `hsl(${hue} 64% 53%)` : undefined}
style:scale={$relativeLevel$ > 0 ? scale : undefined} style:scale={$relativeLevel$ > 0 ? scale : undefined}
style:translate={$relativeLevel$ > 0 ? `0px -${translateY}px` : undefined} style:translate={$relativeLevel$ > 0 ? `0px -${translateY}px` : undefined}
@ -127,6 +132,7 @@
<div <div
class="vaxx-wrapper absolute bottom-[240px] left-1/2 z-50 aspect-square -translate-x-[100px] rounded-full animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-[500px] slide-in-from-left-20 [animation-duration:2.5s]" class="vaxx-wrapper absolute bottom-[240px] left-1/2 z-50 aspect-square -translate-x-[100px] rounded-full animate-in fade-in-0 zoom-in-95 slide-in-from-bottom-[500px] slide-in-from-left-20 [animation-duration:2.5s]"
style:width={vaxrySize + 'px'} style:width={vaxrySize + 'px'}
on:animationend={() => (isAnimationComplete = true)}
> >
<DiscordProfilePicture <DiscordProfilePicture
image={VaxryImage} image={VaxryImage}